ChiroX ChiroX - 5 months ago 24
CSS Question

CSS | Navigationlinks Padding problems

I'm trying to build a new Homepage... but i got Problems with the Padding of the Navigationbar. Here is my Navigationbar:
codepen.io/Chiro1x/pen/vKKXMK



body {
background: black;
font-family: Oswald;
font-size: 20px;
font-weight: normal;
line-height: 1;
margin: 0;
min-width: 960px;
padding: 0;
}
a {
text-decoration: none;
outline: none;
}
a:active {
background: none;
}
img {
border: none;
}
/*-------------------------------------------Header-------------------------------------------*/
p {
color: #252525;
line-height: 20px;
margin: 0;
padding: 0;
}
p a {
color: #252525;
text-decoration: underline;
}
.border-right {
border-right: 5px solid #A40900;

}
.border-left {
border-left: 5px solid #A40900;
}
#header {
margin: 0 auto;
padding: 4px 0 0px;
text-align: center;
width: 960px;
}
#header a.logo {
display: block;
margin: 0 auto;
padding: 0;
width: 540px;
}
#header a.logo img {
border: 0;
display: block;
margin: 0;
padding: 0;
width: 100%;
}
#header ul {
margin: 0;
padding: 0;
background-color: white;
height: 35px;
padding-top: 2%;
border-top: 5px solid #A40900;
border-bottom: 5px solid #A40900;
}
#header ul li {
display: inline-block;
list-style: none;
margin: 0px;
padding: 0;
text-align: center;
}
#header ul li a {
color: #000;
font-family: Oswald ExtraLight;
font-size: 20px;
font-weight: normal;
margin: 0;
padding: 0;
text-decoration: none;
text-transform: uppercase;
}
#header ul li a:hover, #header ul li.selected a {
color: #0ba39c;
}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Willkommen beim Phönix-Brandschutz</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
<link rel="stylesheet" type="text/css" href="css/mobile.css">
<script src="js/mobile.js" type="text/javascript"></script>
</head>
<body>
<div id="header">
<a href="index.html" class="logo"><img src="images/logo.png" alt=""></a>
<ul id="navigation">
<span id="mobile-navigation">&nbsp;</span>
<li class="selected border-right">
<a href="index.html">Startseite</a>
</li>
<li class="border-right">
<a href="about.html">Über uns</a>
</li>
<li class="border-right">
<a href="anfahrt.html">Anfahrt</a>
</li>
<li class="border-right">
<a href="leistungen.html">Leistungen</a>
</li>
<li class="border-right">
<a href="anfrage.html">Kontaktanfrage</a>
</li>
<li>
<a href="allgemein.html">Allgemeine Informationen</a>
</li >
<li class="border-left">
<a href="impressum.html">Impressum</a>
</li>
</ul>
</div>
</body>
</html>





But it should look like :
Screendesign Navbar

Could you help me with my padding issue ?

Answer

Find the following block in your CSS:

#header ul li {
    display: inline-block;
    list-style: none;
    margin: 0px;
    padding: 0;
    text-align: center;
}

And change the padding: 0; to padding: 0 5px;

Adjust the 5px to whatever value you want, bigger or smaller. Bigger values will mean bigger gaps, and smaller values smaller gaps.

So you end up with:

#header ul li {
        display: inline-block;
        list-style: none;
        margin: 0px;
        padding: 0 5px;
        text-align: center;
    }

And it will look like your screenshot

Below is the code from your codepen, with the CSS edit. Next time remember to include the code in you question

body {
  background: black;
  font-family: Oswald;
  font-size: 20px;
  font-weight: normal;
  line-height: 1;
  margin: 0;
  min-width: 960px;
  padding: 0;
}
a {
  text-decoration: none;
  outline: none;
}
a:active {
  background: none;
}
img {
  border: none;
}
/*-------------------------------------------Header-------------------------------------------*/

p {
  color: #252525;
  line-height: 20px;
  margin: 0;
  padding: 0;
}
p a {
  color: #252525;
  text-decoration: underline;
}
.border-right {
  border-right: 5px solid #A40900;
}
.border-left {
  border-left: 5px solid #A40900;
}
#header {
  margin: 0 auto;
  padding: 4px 0 0px;
  text-align: center;
  width: 960px;
}
#header a.logo {
  display: block;
  margin: 0 auto;
  padding: 0;
  width: 540px;
}
#header a.logo img {
  border: 0;
  display: block;
  margin: 0;
  padding: 0;
  width: 100%;
}
#header ul {
  margin: 0;
  padding: 0;
  background-color: white;
  height: 35px;
  padding-top: 2%;
  border-top: 5px solid #A40900;
  border-bottom: 5px solid #A40900;
}
#header ul li {
  display: inline-block;
  list-style: none;
  margin: 0px;
  padding: 0 5px;
  text-align: center;
}
#header ul li a {
  color: #000;
  font-family: Oswald ExtraLight;
  font-size: 20px;
  font-weight: normal;
  margin: 0;
  padding: 0;
  text-decoration: none;
  text-transform: uppercase;
}
#header ul li a:hover,
#header ul li.selected a {
  color: #0ba39c;
}
<div id="header">
  <a href="index.html" class="logo">
    <img src="images/logo.png" alt="">
  </a>
  <ul id="navigation">
    <span id="mobile-navigation">&nbsp;</span>
    <li class="selected border-right">
      <a href="index.html">Startseite</a>
    </li>
    <li class="border-right">
      <a href="about.html">Über uns</a>
    </li>
    <li class="border-right">
      <a href="anfahrt.html">Anfahrt</a>
    </li>
    <li class="border-right">
      <a href="leistungen.html">Leistungen</a>
    </li>
    <li class="border-right">
      <a href="anfrage.html">Kontaktanfrage</a>
    </li>
    <li>
      <a href="allgemein.html">Allgemeine Informationen</a>
    </li>
    <li class="border-left">
      <a href="impressum.html">Impressum</a>
    </li>
  </ul>
</div>