1

I need to horizontally center my .inner_header, but no matter what I try, everything always sticks to the left. In different posts, people are suggesting to do this:

.parent { display: flex; justify-content: center; align-items: center; }

.child { display: inline-block; }

In my case parent would be .header, and child would be .inner_header, but it just doesn't work.

Any suggestions?

Here is my CSS and HTML:

.header{

width: 100%;
height: 80px;
display: block;
background-color: white;
}

.inner_header {

width: 95%;
height: 100%;
display: block;
margin: 0 auto;

}

.logo_container{

height: 100%;
display: table;
float: left;

}

.logo_container2{

height: 100%;
display: table;
float: right;

}

.logo_container h1{

color: black;
height: 100%;
display: table-cell;
vertical-align: middle;
font-size: 32px;
font-weight: 200;

}

.logo_container2 h1{

color: black;
height: 100%;
display: table-cell;
vertical-align: middle;
font-size: 32px;
font-weight: 200;

}

.logo_container h1 span{

font-weight: 800;
}

.logo_container2 h1 span{

    font-weight: 800;
}

.navigation {

float: left;
height: 100%;
padding: 0;
}

.navigation a{

height: 100%;
display: table;
float: left;
padding: 0px 20px;
}

.navigation a:last-child{

padding-right: 0;
}

.navigation a li {

display: table-cell;
vertical-align: middle;
height: 100%;
color: black;
font-size: 15px;
}
<body>
  <div class="header">
   <div class="inner_header">
     
    <ul class="navigation">
    
     <div class="logo_container">     
      <h1>LOGO<span>1</span></h1>
       </div>
           <a><li>LINK</li></a>
           <a><li>LINK</li></a>
           <a><li>LINK</li></a>
           <a><li>LINK</li></a>
           <a><li>LINK</li></a>
           <a><li>LINK</li></a>
        <div class="logo_container2">
      <h1>LOGO<span>2</span></h1>
     </div>
     
    </ul>
     
   </div>
  </div>
David97
  • 31
  • 7

1 Answers1

0

Try using this it centers it on the horizontal sometimes doesn't work if there is CSS conflicting with it:

.inner_header {
margin: 0 auto;
}
VeryBadCoder
  • 66
  • 5