Text overflow screen

Off-Platform Project: Tea Cozy

Hello all,
I have a problem with the alignment of the navbar.
It appears that part of the navbar on the right of the screen is disappearing. I placed a border around all the elements to check this. How can I solve this?

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tea Cozy</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <header>
      <img src="img/img-tea-cozy-logo.png" alt="logo Tea Cozy" />
      <nav>
        <ul>
          <li><a href="#">Mission</a></li>
          <li><a href="#">Featured Tea</a></li>
          <li><a href="#">Locations</a></li>
        </ul>
      </nav>
    </header>
    <main></main>
    <footer></footer>
  </body>
</html>
* {
  border: 1px solid red;
}
body {
  font-family: Helvetica, sans-serif;
  font-size: 22px;
  color: seashell;
  background-color: black;
  opacity: 0.9;
  text-align: center;
  margin: 0;
}

CSS
/* header */

header {
  display: flex;
  position: fixed;
  width: 100%;
  height: 69px;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
}

img {
  height: 50px;
  float: left;
}

nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

nav li {
  display: inline;
  margin-right: 15px;
}

nav li:last-child {
  margin-right: 0; /* Remove margin from the last list item */
}

a {
  color: seashell;
}

Thank You!

It looks like you’re using the browser’s default box-sizing property, which is content-box. That adds the padding of an element to its width, which means that in your case the header’s width is 100% + 20px.

Most stylesheets reset the browser’s default box-sizing:

* {
  box-sizing: border-box;
}

That will subtract the paddings from the element’s width rather than adding it.

3 Likes

Thank you Mirja!

That is it. Completely forgot to add that line.

1 Like