Centering Navigation bar div

Question

I studied a little bit of html and css through high school but I'm having a little bit of trouble creating my website for my small business. I have created my nav bar design but I can't center it in my wrapper. My current code is below.

body {
  background-color: #3393FF;
  font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
}
#wrapper {
  width: 1300px;
  margin-left: auto;
  margin-right: auto;
  background-color: white;
}
#navigation: {
  margin-left: auto;
  margin-right: auto;
}
#navigation li {
  display: inline-block;
  line-height: 40px;
  height: 40px;
}
#navigation a {
  text-decoration: none;
  text-align: center;
  color: #fff;
  display: block;
  width: 204px;
  font-size: 15px;
  background-color: #3393ff;
}
#navigation a:hover {
  -moz-box-shadow: 3px 3px 4px #000;
  -webkit-box-shadow: 3px 3px 3px #000;
  color: #fff;
}

<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="main.css">
  <title>Xcite Technologies</title>
</head>

<body>
  <div id="wrapper">
    <br>
    <div id="navigation">
      <ul>
        <li><a href="index.html">Home</a>
        </li>
        <li><a href="aboutus.html">About Us</a>
        </li>
        <li><a href="services.html">Services</a>
        </li>
        <li><a href="pricing.html">Pricing</a>
        </li>
        <li><a href="contact.html">Contact Us</a>
        </li>
      </ul>
    </div>
    <br>
    <br>
  </div>
</body>

</html>

I have tried a couple different things that were posted on here but nothing seems to work. I'm sure it will be an easy fix and feel like im getting tunnel vision. Thank you for you help in advance!

It has been already answered http://stackoverflow.com/q/114543/5804813 — Chaitanya, Jul 03 '16 at 12:57
I have tried that solution and it didn't work for me. But thank you for trying to help :) — Lindsay, Jul 03 '16 at 13:01
I don't see width of #navigation specified in your code. Give it a width less than **100%** so that `margin: auto;` may work. — Chaitanya, Jul 03 '16 at 13:16

score 1 · Accepted Answer · answered Jul 03 '16 at 13:25

First remove BR from ur html code this is bad idea to create vertical space use padding or margin.

body {
  background-color: #3393FF;
  font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
}
#wrapper {
  width: 1300px;
  padding: 20px 0 40px;
  background-color: white;
}
#navigation {
  text-align: center;
}

#navigation ul {
 display: inline-block;
 padding: 0;
   }

#navigation li {
  display: inline-block;
  line-height: 40px;
  height: 40px;
}
#navigation a {
  text-decoration: none;
  text-align: center;
  color: #fff;
  display: block;
  width: 204px;
  font-size: 15px;
  background-color: #3393ff;
}
#navigation a:hover {
  -moz-box-shadow: 3px 3px 4px #000;
  -webkit-box-shadow: 3px 3px 3px #000;
  color: #fff;
}

<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="main.css">
  <title>Xcite Technologies</title>
</head>

<body>
  <div id="wrapper">
    <div id="navigation">
      <ul>
        <li><a href="index.html">Home</a>
        </li>
        <li><a href="aboutus.html">About Us</a>
        </li>
        <li><a href="services.html">Services</a>
        </li>
        <li><a href="pricing.html">Pricing</a>
        </li>
        <li><a href="contact.html">Contact Us</a>
        </li>
      </ul>
    </div>
  </div>
</body>

</html>

hope this help :D

The breaks are only there while my logos and copy writing is being done. But you fixed my nav bar! Thank you so much!! — Lindsay, Jul 03 '16 at 14:06

score 0 · Answer 2 · answered Jul 03 '16 at 12:53

Hi there you can use HTML to do that:

use the <center> tag, your code would become something like that:

<body>
    <div id="wrapper">
        <br>
        <div id="navigation">
            <ul> 
                <center>
                   <li><a href="index.html">Home</a></li> 
                   <li><a href="aboutus.html">About Us</a></li>
                   <li><a href="services.html">Services</a></li>
                   <li><a href="pricing.html">Pricing</a></li> 
                   <li><a href="contact.html">Contact Us</a></li> 
                </center>
            </ul>   
        </div> 
        <br>
        <br> 
    </div>
</body>

Please test it and let me now if it works :)

I gave that one a go and for some reason it is uneven. There is more of a margin on the left hand side. Any idea why? — Lindsay, Jul 03 '16 at 13:02
well... let me check you css again. You might have some `margin` or `padding` set to the nav bar — Nanyo, Jul 03 '16 at 14:14

Centering Navigation bar div

2 Answers2