Question 173910 in Html Question posted in
Some basic documentation can be found here.

Html – Navbar width greater than screen size even though width: 100%

I am building a website mobile-first and I am lost at why the width of the navbar is going outside of the screen width. I am viewing it on a 414 x 896 screen. I set width: 100%, margin and padding to 0, yet it still overflows. I also tried a div element and the same thing happens. I am using Google DevTools to view the screen, maybe it’s an error on their side?

html {
  font-size: 16px;
}

* {
  font-family: Verdana;
  padding: 0;
  margin: 0;
}

nav {
  height: 50px;
  border: 1px solid red;
  width: 100%;
}
<nav>
  <a>Log in</a>
</nav>

I tried individually assigning padding and margin to the navbar and messing around with the height property

Tags:

2

Answers


  1. 0

    The width of the nav is being calculated by adding the 100% plus the 1px borders. Either use calc() to account for that, or change the box-sizing:

    Using calc():

    html {
  font-size: 16px;
}

* {
  font-family: Verdana;
  padding: 0;
  margin: 0;
}

nav {
  height: 50px;
  border: 1px solid red;
  width: calc(100% - 2px);
}
    <nav>
  <a>Log in</a>
</nav>

    Using box-sizing:

    html {
  font-size: 16px;
}

* {
  font-family: Verdana;
  padding: 0;
  margin: 0;
}

nav {
  height: 50px;
  border: 1px solid red;
  width: 100%;
  box-sizing: border-box;
}
    <nav>
  <a>Log in</a>
</nav>
    Login or Signup to reply.
  2. 0

    You’re setting the nav to 100%, and then adding a border of 1px to it which makes the total larger.

        html {
      font-size: 16px;
      width:100%;
    }

    * {
      font-family: Verdana;
      padding: 0;
      margin: 0;
    }

    nav {
      height: 50px;
      border: 1px solid red;
    }
        <nav>
      <a>Log in</a>
    </nav>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search