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?


<!DOCTYPE html>
<html lang="en">
    <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" />
      <img src="img/img-tea-cozy-logo.png" alt="logo Tea Cozy" />
          <li><a href="#">Mission</a></li>
          <li><a href="#">Featured Tea</a></li>
          <li><a href="#">Locations</a></li>
* {
  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;

/* 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.


Thank you Mirja!

That is it. Completely forgot to add that line.

1 Like