I'm a beginner trying to set up my first website. I want it to be responsive from the beginning, so I don't want to have a fixed width.
Alright, now I created a nav bar - consisting of 4 nav elements - which I want to be centered.
I tried to do it with text-align: center in my nav ul-selector, but it does not center properly.
There seems to be more space on the left side than on the right side.
Here is an image so you can see what I mean: https://i.stack.imgur.com/o5ajc.jpg
Here is the HTML code:
<body>
<div id="wrapper">
<header>
<h1>This is my website</h1>
<nav>
<ul>
<li><a href="#">Text</a></li>
<li><a href="#">Image</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
</header>
</div>
And 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;
}
nav li {
/* 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;
}
Could you tell me where the mistake is?
Your
<ul>element most likely has some in-built padding from the browser's stylesheet. This will bump the content a bit to the right.Try adding:
If you're just getting started, you should try to get familiar with your developer tools as quickly as possible. You can scope these problems out very quickly by looking at the computed styles, or just using the inspector to highlight elements on the page.
Bonus answer: The concept that responsive layouts can't have fixed widths is a fallacy. Take a look at the
@mediarule, and media queries, this is how true responsive websites are created.