Search code examples
htmlcsshtml-lists

How can I center exactly the list items on the nav?

I'm trying to center everything. I can't understand what causes the space on the sides to be unequal:

header {
  text-align: center;
  border: solid pink;
}

body {
  font-family: 'Lora', serif;
  margin: 0;
}

h1 {
  color: #143774;
  font-family: lora;
  margin-bottom: 1px;
  font-size: 3.375;
}

ul {
  display: flex;
  justify-content: space-around;
  border: solid blue;
}

li {
  list-style: none;
  color: #707070;
  font-family: 'Ubuntu', sans-serif;
  text-transform: uppercase;
  border: solid red;
  margin: 0 1em;
}
<body>
  <header>
    <logo>
      <h1> Living the simple life</h1>
      <p> a blog exploring minimalism in life</p>
    </logo>
    <nav>
      <ul>
        <li>home</li>
        <li>about me</li>
        <li>recent posts</li>
      </ul>
    </nav>
  </header>
</body>

enter image description here

Solution

  • Use space-between on your ul flex display and remove the default padding from ul and remove the margin you set on the li.

    header {
  text-align: center;
  border: solid pink;
}

body {
  font-family: 'Lora', serif;
  margin: 0;
}

h1 {
  color: #143774;
  font-family: lora;
  margin-bottom: 1px;
  font-size: 3.375;
}

ul {
  display: flex;
  justify-content: space-between;
  border: solid blue;
  padding: 0;
}

li {
  list-style: none;
  color: #707070;
  font-family: 'Ubuntu', sans-serif;
  text-transform: uppercase;
  border: solid red;
}
    <body>
  <header>
    <logo>
      <h1> Living the simple life</h1>
      <p> a blog exploring minimalism in life</p>
    </logo>
    <nav>
      <ul>
        <li>home</li>
        <li>about me</li>
        <li>recent posts</li>
      </ul>
    </nav>
  </header>
</body>