I am a beginner trying to build my first website. I want it to be responsive from the start, so I don't want to have a fixed width. Navigation bar is not centered correctly (HTML/CSS)
Ok, now I've created a navbar - consisting of 4 nav elements - which I want to center. I'm trying to use text-align: center in a nav ul selector, but it's not centered correctly. There seems to be more space on the left side than on the right side.
Below is the HTML code:
Here is the CSS code:
header {
font-family: 'montserrat', 'helvetica', sans-serif;
font-weight: 700;
text-transform: uppercase;
}
header h1 {
border-bottom: 1px solid #000;
color: #fe2859;
font-size: 2.7em;
letter-spacing: 0.0625em;
text-align: center;
}
/* Here comes the important part: */
nav ul {
list-style: none;
/* I want everything inside the nav bar centered, thus: */
text-align: center;
}
name in {
/* I want the li-elements side by side instead of a vertical list, thus: */
display: inline;
padding: 10px;
}
nav li a {
text-decoration: none;
color: #fe2859;
font-size: 1.3em;
}
Can you tell me where is the error?
2015-06-16
Dominik