There is extra space in my div of the header on the left?

Question

I am trying to complete CSS exercises for flexbox from Odin Project. This is the self check:

Self Check

There is space between all items and the edge of the header (specific px amount doesn't matter here).
Logo is centered vertically and horizontally.
list-items are horizontal, and are centered vertically inside the header.
left-links and right-links are pushed all the way to the left and right, and stay at the edge of the header when the page is resized.
Your solution does not use floats, inline-block, or absolute positioning.

However, there is extra space in the div of class left-links that doesn't make sense on why it is there in HTML or CSS code as I did not add any there myself.

It should look like this: But this is what I got:

I've tried so many ways to get left-links pushed to the left to no avail.

.header {
  font-family: monospace;
  display: flex;
  background: papayawhip;
  justify-content: space-between;
  padding: 9px 4.5px;
}

.logo {
  font-size: 48px;
  font-weight: 900;
  color: tomato;
  background: white;
  padding: 4px 32px;
}

ul {
  /* this removes the dots on the list items*/
  list-style-type: none;
  display: flex;
  justify-content: flex-start;
  gap: 9px;
}

a {
  font-size: 22px;
  background: white;
  padding: 8px;
  /* this removes the line under the links */
  text-decoration: none;
}

.left-links a {
  align-items: left;
}

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flex Header</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="header">
    <div class="left-links">
      <ul>
        <li><a href="#">ONE</a></li>
        <li><a href="#">TWO</a></li>
        <li><a href="#">THREE</a></li>
      </ul>
    </div>
    <div class="logo">LOGO</div>
    <div class="right-links">
      <ul>
        <li><a href="#">FOUR</a></li>
        <li><a href="#">FIVE</a></li>
        <li><a href="#">SIX</a></li>
      </ul>
    </div>
  </div>
</body>

</html>

score 5 · Accepted Answer · answered Sep 12 '22 at 16:18

ul has the default padding. If you want to get rid of it, you can reset that padding value like below

ul {
   padding: 0;
}

.header {
  font-family: monospace;
  display: flex;
  background: papayawhip;
  justify-content: space-between;
  padding: 9px 4.5px;
}

.logo {
  font-size: 48px;
  font-weight: 900;
  color: tomato;
  background: white;
  padding: 4px 32px;
}

ul {
  /* this removes the dots on the list items*/
  list-style-type: none;
  display: flex;
  justify-content: flex-start;
  gap: 9px;
  padding: 0; /*Removed the default padding*/
}

a {
  font-size: 22px;
  background: white;
  padding: 8px;
  /* this removes the line under the links */
  text-decoration: none;
}

.left-links a {
  align-items: left;
}

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flex Header</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="header">
    <div class="left-links">
      <ul>
        <li><a href="#">ONE</a></li>
        <li><a href="#">TWO</a></li>
        <li><a href="#">THREE</a></li>
      </ul>
    </div>
    <div class="logo">LOGO</div>
    <div class="right-links">
      <ul>
        <li><a href="#">FOUR</a></li>
        <li><a href="#">FIVE</a></li>
        <li><a href="#">SIX</a></li>
      </ul>
    </div>
  </div>
</body>

</html>

Johannes · Answer 2 · 2022-09-12T16:28:46.190

Add this rule:

.left-links > ul {
  padding-left: 0;
}

It erases the default left-padding of the ul inside the .left-links container.

And add align-items: center; to the rule for .header, which vertically centers the elements in there:

.header {
  font-family: monospace;
  display: flex;
  background: papayawhip;
  justify-content: space-between;
  padding: 9px 4.5px;
  align-items: center;
}

.logo {
  font-size: 48px;
  font-weight: 900;
  color: tomato;
  background: white;
  padding: 4px 32px;
}

ul {
  /* this removes the dots on the list items*/
  list-style-type: none;
  display: flex;
  justify-content: flex-start;
  gap: 9px;
}

a {
  font-size: 22px;
  background: white;
  padding: 8px;
  /* this removes the line under the links */
  text-decoration: none;
}

.left-links a {
  align-items: left;
}
.left-links > ul {
  padding-left: 0;
}

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flex Header</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="header">
    <div class="left-links">
      <ul>
        <li><a href="#">ONE</a></li>
        <li><a href="#">TWO</a></li>
        <li><a href="#">THREE</a></li>
      </ul>
    </div>
    <div class="logo">LOGO</div>
    <div class="right-links">
      <ul>
        <li><a href="#">FOUR</a></li>
        <li><a href="#">FIVE</a></li>
        <li><a href="#">SIX</a></li>
      </ul>
    </div>
  </div>
</body>

</html>

There is extra space in my div of the header on the left?

2 Answers2