Every time I create a simple nav bar at the top of my page, the bar is too far right

Question

Here is my issue: https://www.youtube.com/watch?v=dcFflA4fsTU&feature=youtu.be. I put the nav bar at the top using position: absolute, top: 0px, and left: 0px, and width: 100%. I have no idea why this is happening. Thanks for all the help.

nav {
 background-color: hsl(0, 0%, 10%);
 position: absolute;
 top: 0px;
 left: 0px;
 width: 100%;
 font-size: 20px;
 font-family: Arial;
 text-align: center;
 padding: 20px;
}

nav a {
 color: hsl(0, 0%, 90%); 
 text-decoration: none;
 padding: 21px;
}

nav a:hover {
 background-color: hsl(0, 0%, 90%);
 color: hsl(0, 0%, 10%);
}

<nav>
 <a href="">BUTTON</a>
</nav>

There needs to be no padding – RingGamesCompany May 01 '20 at 01:43 — RingGamesCompany, May 01 '20 at 01:43

Andy Hoffman · Accepted Answer · 2020-05-01T01:56:36.000

1

You've declared nav's width as 100%, and you additionally add 40px of total horizontal padding to the element (20px left, 20px right).

The following line ensures that width: 100% (and height: 100%) doesn't extend beyond 100% if you add padding: 20px to an element.

* { 
  box-sizing: border-box;
}

Without border-box, your nav is wider than 100%—it's 100% + 40px, which causes the horizontal scrollbar.

With border-box, your nav is 100% in total, with the padding still applied.

Read more about the box model here.

You're possibly also seeing the browser's default user-agent styles. Add the following to remove the default margin:

body { 
  margin: 0;
}

edited May 01 '20 at 01:56

answered May 01 '20 at 01:38

Andy Hoffman

15,329
3
30
51

So, I'm kind of new to the scene of CSS. Do you mind explaining what either of those do? Also, I have heard about *, but I just looked it up, and I read it was for IE browsers? Thanks for all the help anyway, because this did fix it. – ryanh May 01 '20 at 01:43
@ryanh The `*` means "all elements". – Andy Hoffman May 01 '20 at 01:46
Thanks so much for the help, this all actually makes sense now. – ryanh May 01 '20 at 01:54
@ryanh I cleaned up my answer so it's more straightforward. – Andy Hoffman May 01 '20 at 01:57

score 0 · Answer 2 · answered May 01 '20 at 01:42

0

i think it because of combination width 100% and padding: 20px;

nav {
    background-color: hsl(0, 0%, 10%);
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    font-size: 20px;
    font-family: Arial;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
}

answered May 01 '20 at 01:42

Erwin_San

21
6

Ok that actually makes sense. You and @Andy Hoffman both helped. I just looked it up in w3schools and I see now that when adding padding to an element, it adds to the width of an element unless specifying a box-sizing attribute (unless I'm wrong here). And for something like a nav bar, you don't need padding on the right or left. Thank you so much. – ryanh May 01 '20 at 01:54

Every time I create a simple nav bar at the top of my page, the bar is too far right

2 Answers2