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

CSS Navigation Bar width exceeds a screen view – Html

I have a HTML file and CSS file with code:

body {
    border: 0px;
    padding: 0px;
    margin: 0px;
}


/* HEADER STYLE */
header .top-nav {
    padding: 10px;
    margin: 0;
    position: fixed;
    width: 100%;
    background-color: aqua;
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: space-between;
}

header .top-nav-right-block {
    display: flex;
}
<header>
        <nav class="top-nav">
            <a href="">Home</a>
            <div class="top-nav-right-block">
                <a href="">Portfolio</a>
                <a href="">Contacts</a>
            </div>
        </nav>

    </header>

The problem is when I set a 10px padding of .top-nav I expect to have a 100% width navbar with 10px of padding from each side but what I get instead is just a content pushed out of screen from right side. Inspecting the code in a browser indicates that I have a position-right: -20px.

I understand that paddings applied from left side only and pushes content to the right on respective value, but I don’t understand why.

Tags:

3

Answers


  1. 0

    Change the box-sizing on your nav bar to border-box;

    See: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

    body {
  border: 0px;
  padding: 0px;
  margin: 0px;
}


/* HEADER STYLE */

header .top-nav {
  padding: 10px;
  margin: 0;
  position: fixed;
  width: 100%;
  background-color: aqua;
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
}

header .top-nav-right-block {
  display: flex;
}
    <header>
  <nav class="top-nav">
    <a href="">Home</a>
    <div class="top-nav-right-block">
      <a href="">Portfolio</a>
      <a href="">Contacts</a>
    </div>
  </nav>
</header>

    Alternately, removing the width and fixed position would resolve the issue, but I’m assuming you want to keep the fixed positioning.

    Login or Signup to reply.
  2. 0

    Try setting the box-sizing property to border-box for the .top-nav element, like this:

    body {
    border: 0px;
    padding: 0px;
    margin: 0px;
}


/* HEADER STYLE */
header .top-nav {
    box-sizing: border-box;
    padding: 10px;
    margin: 0;
    position: fixed;
    width: 100%;
    background-color: aqua;
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: space-between;
}

header .top-nav-right-block {
    display: flex;
}
    <header>
        <nav class="top-nav">
            <a href="">Home</a>
            <div class="top-nav-right-block">
                <a href="">Portfolio</a>
                <a href="">Contacts</a>
            </div>
        </nav>

    </header>

    box-sizing defaults to content-box if not specified which means that the padding and border are added to the width and height of the element, rather than being included within the specified width and height.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search