Nav bar not centered properly (HTML/CSS)

Question

I'm a beginner trying to set up my first website. I want it to be responsive from the beginning, so I don't want to have a fixed width.

Alright, now I created a nav bar - consisting of 4 nav elements - which I want to be centered. I tried to do it with text-align: center in my nav ul-selector, but it does not center properly. There seems to be more space on the left side than on the right side.

Here is an image so you can see what I mean: https://i.sstatic.net/o5ajc.jpg

Here is the HTML code:

<body>
 <div id="wrapper">
   <header>
   <h1>This is my website</h1>
   <nav>
    <ul>
      <li><a href="#">Text</a></li>
      <li><a href="#">Image</a></li>
      <li><a href="#">Gallery</a></li>
      <li><a href="#">About</a></li>
    </ul>
  </nav>
  </header>
</div>

And here is the CSS code:

header {
  font-family: 'montserrat', 'helvetica', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
}

header h1 {
  border-bottom: 1px solid #000;
  color: #fe2859;
  font-size: 2.7em;
  letter-spacing: 0.0625em;
  text-align: center;
}

/* Here comes the important part: */

nav ul {
  list-style: none;
  /* I want everything inside the nav bar centered, thus: */
  text-align: center;
}

nav li {
  /* I want the li-elements side by side instead of a vertical list, thus: */
  display: inline;
  padding: 10px;
}

nav li a {
  text-decoration: none;
  color: #fe2859;
  font-size: 1.3em;
}

Could you tell me where the mistake is?

Oka · Accepted Answer · 2015-06-16 01:31:19Z

4

Your <ul> element most likely has some in-built padding from the browser's stylesheet. This will bump the content a bit to the right.

Try adding:

nav ul {
  padding: 0; /* Remove the default padding. */
  list-style: none;
  /* I want everything inside the nav bar centered, thus: */
  text-align: center;
}

If you're just getting started, you should try to get familiar with your developer tools as quickly as possible. You can scope these problems out very quickly by looking at the computed styles, or just using the inspector to highlight elements on the page.

Bonus answer: The concept that responsive layouts can't have fixed widths is a fallacy. Take a look at the @media rule, and media queries, this is how true responsive websites are created.

edited Jun 16, 2015 at 1:31

answered Jun 16, 2015 at 1:21

Oka

27k7 gold badges51 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Nav bar not centered properly (HTML/CSS)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related