Why doesn't header center properly?

July 29, 2022

when i use this code:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border: 1px solid green;
}

li,
a {
  text-decoration: none;
  color: black;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>My first project</title>
</head>

<body>
  <header>
    <p>LOGO HERE</p>
    <ul class="nav__links">
      <li><a href="#">Home</li>
                <li><a href="#">About</li>
                <li><a href="#">Services</li>
                <li><a href="#">Contact</li>
            </ul>
            <a class="cta" href="#">Call us button!</a>
  </header>
</body>

</html>

i get this: output from code

instead of all 3 elements being evenly centered. any thoughts? I was following yt tutorial and last night it was all ok, but today it doesn’t seem to work… I can’t figure out what i am doing wrong…

>Solution :

It is because the a tags inside the li tags don’t have a closing tag. The browser that renders it gets confused by where to close the tags and adds an extra a tag after the ul. So, the proper code would be:

<header>
        <p>LOGO HERE</p>
        <ul class="nav__links">
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
        <a class="cta" href="#">Call us button!</a>
</header>