Header not being centered

Question

I have quite made this to device sizes yet but im trying to get the header links in the middle of the header, but they are floating to the left and the centre text doesn't seem to work i'm not able to see why so I will take any inputs and excuse my bad code I'm new to this thing... help.

* {
  margin: 0px;
}
div#left_container {
  float: left;
  height: 10000px;
  width: 18%;
  background-color: #FDFDFD;
}
div#main_container {
  float: left;
  height: 10000px;
  width: 64%;
}
div#right_container {
  float: left;
  height: 10000px;
  width: 18%;
  background-color: #FDFDFD;
}
div#header_bottom {
  height: 60px;
  width: auto;
  margin: 0 10px 0 10px;
  background-color: #8F7E7E;
  opacity: 0.45;
}
div#header_bottom ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
div#header_bottom li a {
  display: inline;
  width: 60px;
  text-decoration: none;
  padding: 8px 16px;
}
div#header_bottom li {
  float: left;
  text-align: center;
  font-family: century gothic;
  font-size: 45px;
  text-align: -webkit-center;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Mazig Grooms</title>
</head>

<body>
  <div id="left_container">

  </div>

  <div id="main_container">
    <div align="center" id="header_top">
      <img alt="logo" width="175" src="logo.png">
    </div>
    <div align="center" id="header_bottom">
      <nav>
        <ul>
          <li><a href="">Home</a>
          </li>
          <li><a href="">Times</a>
          </li>
          <li><a href="">Contact Us</a>
          </li>
        </ul>
      </nav>

    </div>

  </div>

  <div id="right_container">

  </div>

</body>

</html>

please.

Basically, the items your header text is in have `float:left`, which can't be aligned using `text-align`. The solution proposed in the duplicate question I proposed it to instead make them `display:inline-block`. — Serlite, Oct 31 '16 at 20:28

score 0 · Answer 1 · answered Oct 31 '16 at 20:36

You can follow this tutorial.

But I strongly recommend you flex.

Set to the parent of the floating elements:

ul {
   display: flex;
   display: -webkit-flex;
   justify-content: center; // or space-around
   -webkit-justify-content: center;
}

That's all! All children will be centered within the parent.

Header not being centered

1 Answers1