CSS trick for full screen sized div pushing my list items to the right

Question

I am using this trick to get my divs to span the entire screen

  left: 50%;
 margin-left: -50vw;
 margin-right: -50vw;
 max-width: 100vw;
 position: relative;
 right: 50%;
 width: 100vw;

However this is causing my list items in my nav bar to get pushed over to the right for some reason. I can't figure out what is pushing them or how far they are being pushed.

Is there a better way to span a div fullscreen that won't break my elements? Is there a simple fix to this that I can't seem to find?

body {
  background-color: #333335;
}

#logoCont {
  background-color: #3c9ea7;
  left: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  max-width: 100vw;
  position: relative;
  right: 50%;
  width: 100vw;
  top: -1vh;
  padding-top: 2vh;
  margin-bottom: 0px;
}

#logo {
  max-width: 20vw;
  max-height: 10vh;
  padding-left: 10px;
}

#navBar {
  display: flex;
  justify-content: center;
  flex-direction: row;
  left: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  max-width: 100vw;
  position: relative;
  right: 50%;
  width: 100vw;
  background-color: red;
  height: 4vh;
  align-content: center;
  top: -1vh;
  margin-top: 0px;
}

.navItem {
  text-align: center;
  list-style: none;
  height: 100%;
  position: relative;
  line-height: 4vh;
  flex-grow: 1;
  margin: 0px;
  padding: 0px;
}

<body>

  <div id="nav">

    <div id="logoCont">
      <img src="images/logo.png" id="logo">
    </div>

    <ul id="navBar">
      <div id="home" class="navItem">Home</div>
      <div id="events" class="navItem">Events</div>
      <div id="price" class="navItem">Pricing</div>
    </ul>

  </div>

</body>

Johannes · Accepted Answer · 2020-04-04T00:21:43.423

Add padding-left: 0; padding-right: 0; to your ul to reset the default padding:

body {
  background-color: #333335;
}

#logoCont {
  background-color: #3c9ea7;
  left: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  max-width: 100vw;
  position: relative;
  right: 50%;
  width: 100vw;
  top: -1vh;
  padding-top: 2vh;
  margin-bottom: 0px;
}

#logo {
  max-width: 20vw;
  max-height: 10vh;
  padding-left: 10px;
}

#navBar {
  display: flex;
  justify-content: center;
  flex-direction: row;
  left: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  max-width: 100vw;
  position: relative;
  right: 50%;
  width: 100vw;
  background-color: red;
  height: 4vh;
  align-content: center;
  top: -1vh;
  margin-top: 0px;
  padding-left: 0;
  padding-right: 0;
}

.navItem {
  text-align: center;
  list-style: none;
  height: 100%;
  position: relative;
  line-height: 4vh;
  flex-grow: 1;
  margin: 0px;
  padding: 0px;
}

  <div id="nav">
    <div id="logoCont">
      <img src="images/logo.png" id="logo">
    </div>
    <ul id="navBar">
      <div id="home" class="navItem">Home</div>
      <div id="events" class="navItem">Events</div>
      <div id="price" class="navItem">Pricing</div>
    </ul>
  </div>

I'm kind of upset that it was that easy and literally the one thing I didn't try. Why exactly does the padding get messed up in the first place when im not changing it anywhere? — Shniper, Apr 04 '20 at 00:02
because in most (or all?) browsers the `ul` element gets a padding by default — Johannes, Apr 04 '20 at 00:21

CSS trick for full screen sized div pushing my list items to the right

1 Answers1