Div isn't responsive while scaling up

Question

My problem is that in mobile view which is 320px wide, everything looks okay, but when I start manually scaling up, the nav won't stay in center. It just stays on the left side of the screen, when the right side gets bigger. Title (h1) scales up normally. Navigation "buttons" should remain with the same width till break which is 768px wide.

body {
  background-color: #FAFAFA;
  font-family: helvetica;
  margin: 0;
  padding: 0;
}
.title {
  text-align: center;
  font-size: 1.5em;
  margin-top: 30px;
  margin-bottom: 30px;
  color: #626262;
}
/*** NAVIGATION ***/

.main-nav li {
  list-style: none;
}
.main-nav a {
  text-decoration: none;
  background-color: white;
  font-weight: 600;
  color: #626262;
  padding-top: 15px;
  padding-bottom: 15px;
  font-size: .75em;
  display: flex;
  display: inline-block;
  width: 280px;
  margin-top: 5px;
  text-align: center;
  margin-left: -20px;
}
.profile-icon {
  height: 125px;
  width: 200px;
}
/******  PORTFOLIO    ********/

.main-content {
  background-color: #FFFFFF;
}

<header class="main-header">
  <div class="container">
    <h1 class="title">Title1</h1>

    <ul class="main-nav">
      <li><a href="#">HOME</a>
      </li>
      <li><a href="#">PORTFOLIO</a>
      </li>
      <li><a href="#">CONTACT</a>
      </li>
    </ul>

    <img src="images/responsive-layout-profile.png" class="profile-icon">

    <p>Text field</p>

  </div>
</header>
<div class="main-content">
  <h2 class="title-two">PORTFOLIO</h2>
</div>

Please include a [minimal, verifyable example](https://stackoverflow.com/help/mcve) in your post — TheThirdMan, Aug 01 '16 at 13:14
this looks like what you are looking for [link](http://stackoverflow.com/questions/618097/how-do-you-easily-horizontally-center-a-div-using-css) — Danimal, Aug 01 '16 at 13:15

score 0 · Answer 1 · answered Aug 01 '16 at 13:23

see here : jsfiddle

you were using both display:flex and display:inline-block on li a . just use one display .

i suggest you don't use fixed width on the buttons, but instead use float:left with percentage

also you say that you want the buttons to remain the same width till 768px, but you set a width of width: 280px * 3 = 840px. so ofcourse the three buttons don't fit on 768px device width.

added also a media Q for below 768px

check also snippet

body {
    background-color: #FAFAFA;
    font-family: helvetica;
    margin: 0;
    padding: 0;
}

ul.main-nav {
  padding:0;
}

.title {
    text-align: center;
    font-size: 1.5em;
    margin-top: 30px;
    margin-bottom: 30px;
    color: #626262;
}

/*** NAVIGATION ***/

.main-nav li {
    list-style: none;
    float:left;
     width: 32.66%;
     margin-right:1%;
}

ul li:last-child { margin-right:0;}
.main-nav a {
    text-decoration: none;
    background-color: white;
    font-weight: 600;
    color: #626262;
    padding-top: 15px;
    padding-bottom: 15px;
    font-size: .75em;
    display:block;
   
    

    margin-top: 5px;
    text-align: center;

}

.profile-icon {
    height: 125px;
    width: 200px;


}





 /******  PORTFOLIO    ********/

.main-content {
    background-color: #FFFFFF;
}

@media only screen and (max-width: 768px) {
  
  .main-nav li { width:100%}
  }
}

<header class="main-header">
    <div class="container">
     <h1 class="title">Title1</h1>

     <ul class="main-nav">
        <li><a href="#">HOME</a></li>
        <li><a href="#">PORTFOLIO</a></li>
        <li><a href="#">CONTACT</a></li>
    </ul>

    <img src="images/responsive-layout-profile.png" class="profile-icon">

    <p>Text field</p>

   </div>
 </header>
    <div class="main-content">
       <h2 class="title-two">PORTFOLIO</h2>
    </div>

score 0 · Answer 2 · answered Aug 01 '16 at 13:25