I'm trying to display the items of a list horizontally across the page, that is, like this:
Item one Item two Item three
as opposed to vertically down the page. I also don't want bullet points. The text alignment should be central.
Using the CSS property display: inline
has got me so far:
This produces no visible bullet points, but still indents each list item a little, as though there were a bullet present. This means that, with text-align: center
, the list is slightly offset from the center. (The indent can be seen more easily with text-align: left
.)
What's causing this indent and how can I remove it so that I can center the list?
@import url('https://fonts.googleapis.com/css2?family=Lobster&family=Merriweather:wght@300&display=swap');
body {
font-family: "Merriweather", serif;
background-color: #f4f2d2;
}
header {
font-family: "Lobster", cursive;
background-color: #1F2421;
color: #FBACBE;
text-align: center;
margin-bottom: 2em;
}
header nav ul li {
display: inline;
margin: 0 0.6em;
font-size: 2em;
}
<header>
<h1>Headline</h1>
<nav><ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul></nav>
</header>