0

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>
DCR
  • 14,737
  • 12
  • 52
  • 115

0 Answers0