HTML/CSS: Leerer Raum rechts neben Navigation nicht wegzubekommen

[Mondgesang]

Ich bin zu 99% zufrieden mit meinem Konstrukt der Website. Bloß macht mir meine Navigation etwas zu schaffen. Ich habe es geschafft, dass meine Navigation als eine Zeile verbleibt, auch wenn der Bildschirm kleiner wird, ohne Zeilenumbrüche. Das habe ich mittels white-space: nowrap geschafft. Allerdings hatte das den Effekt, dass ich nun rechts neben allen meinen Elementen (nav, main, footer etc) einen dünnen Strich habe, hinter welchem man das Hintergrundbild sieht.

Und ich suche und suche in meiner Navigation nach etwas, das diesen Rand quasi nach außen drückt. Die CSS meiner Navigation sieht so aus:

/* NAVIGATION  */

.navheader-row {
  display: flex;
}

.navheader-column-left {
  text-align: left;
  width: 20%;
  margin: 0;
  padding-left: 20px;
}

.navheader-column-right {
  text-align: right;
  width: 80%;
  margin: 0;
  padding-right: 20px;
  white-space: nowrap;
}

@media screen and (max-width: 1200px) {
.navheader-column-left, .navheader-column-right {
  width: 100%;
  }
}

/* Clear floats after the columns */
.navheader-row:after {
  content: "";
  display: table;
  clear: both;
}

nav {
  display: inline-block;
  width: 100%;
  padding: 0;
  float: left;
  font-size: 18px;
}

ul li {
  list-style: none;
  margin: 0 auto;
  display: inline-block;
  padding: 0 30px;
  position: relative;
  text-decoration: none;
  text-align: center;
}

li a {
  color: #DDDDDD;
  text-decoration: none;
}

li a:hover {
  color: #FFFFFF;
}

li:hover {
  cursor: pointer;
}

ul li ul {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  padding-left: 0;
  left: 0;
  display: none;
  background: inherit;
}

ul li:hover > ul,
ul li ul:hover {
  background-color: rgba(20,20,20,0.99);
  visibility: visible;
  opacity: 1;
  display: block;
  min-width: 250px;
  text-align: left;
  padding-top: 20px;
}

ul li ul li {
  clear: both;
  width: 100%;
  text-align: left;
  margin-bottom: 20px;
  border-style: none;
}

ul li ul li a:hover {
  padding-left: 10px;
  border-left: 2px solid #DDDDDD;
  transition: all 0.3s ease;
}

ul li ul li a {
   transition: all 0.5s ease;
}

macht euch bitte nichts aus diesen .navheader-row Geschichten. Das habe ich nur gemacht, um in der Navizeile links ein Logo einzubauen das links alignt ist und die navigation eben rechts. Ohne das white-space: nowrap hattes es auch wunderbar funktioniert und alle Elemente hatten den Bildschirm perfekt ausgefüllt.

Es muss irgendwo in den ul li etc etwas geben das nach rechts drückt oder?

 

[kachiri]

Breite 20+80% = 100% + 40 Pixel Padding = Mehr als 100% Seitenbreite.
Das sieht man defacto ja auch am Scrollbalken unten.

Wirklich niemals unterschiedliche Formate mixen.

 

[Mondgesang]

Oh... dachte Padding sei unbedenklich weil es nach innen dämmt und margin wäre das problematische weil es nach außen drückt.

 

[conglom-o]

Dann setze doch mal das padding auf 0 und berichte was passiert

 

[Joshinator]

dachte Padding sei unbedenklich weil es nach innen dämmt

Standardmäßig wirklich problematisch.

Per box-sizing kann man das aber umstellen, box-sizing: border-box ist nicht grundlos quasi in jedem modernem CSS-Reset drinnen.

 

[netzgestaltung]

Oder mit ein bisschen mathe:

.navheader-column-right {
  width:calc(80% - 40px);
}