How can i get rid of the extra padding to the left of my nav bar?

I am trying to make my nav bar have equal padding both left and right but I can’t seem to make it work.

I’ve tried changing the value of the left padding but to no avail. I’ve also tried to come up with a solution through the dev-tool but that doesn’t make me any brighter.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="navBar.css">
  <title>HTML exercises</title>
</head>

<body>
  <nav>
    <div class="nav-bar">
      <ul>
        <li>Home</li>
        <li>About Us</li>
        <li>Our products</li>
        <li>Contact Us</li>
      </ul>
    </div>
  </nav>
</body>

</html>
html {
  box-sizing: border-box;
  margin: 0 auto;
  padding: 0 auto;
}

.nav-bar {
  background:beige;
}

ul {
  display: flex;
  justify-content: space-around;
  list-style-type: none;
}

li {
  font-family: Arial, Helvetica, sans-serif;
  border: solid lightblue;
  border-radius: 10px;
  background-color: darkcyan;
  color: white;
  padding: 1rem 2rem;
}
1 Like

Hi there!! :smiley:

In your html selector in CSS, you have added a value of “auto” padding to the left and right. That gives some added space to the left and right of the elements inside your html.

Try removing that padding and see if it fixes the position of your nav.

Hope this helps! :slightly_smiling_face:

1 Like

I tried it, but removing the padding there doesn’t seem to change the position of my nav at all.

1 Like

Sorry, my bad! :sweat_smile:

Try removing the left and right padding from your ul, this can remove any indentation that comes with an unordered list.

Hope this can fix the problem!
Happy coding! :smiley:

1 Like

Wow this worked , thanks! :slight_smile:
But why does the padding not get removed when I remove it in the html selector, like what you told me to do the first time?

1 Like

No problem, happy to have helped! :blush:

It all comes to where that extra padding was coming from.
The “auto” padding in the html selector doesn’t give you any padding at all on the left and right sides, because “auto” is not accepted as a value for padding, and that’s where my mistake was. So, writing padding: 0 auto; is basically the same as writing padding: 0;.

That extra padding that created the problem, was actually the automatic indentation that comes with the unordered list. By setting the padding inside the ul selector to 0, we removed specifically that automatic indentation and set the internal <li> elements to start exactly where the <ul> starts.

Here’s an image that I hope it makes what I wrote a little bit more clear:

English is not my first language, so I really hope I answered clearly!

If you have any other question regarding this matter, feel free to ask! :smile:

2 Likes

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.