How to align a text with background-color?

first time posting in the forum. I'm a beginner in programming and currently learning web development. I stumbled upon this problem while trying to re-create Google homepage.

This is the navigation bar that I am trying to fix.

The sign-up list was aligned properly earlier, but, when I add the background-color. It goes out of the alignment. How is it exactly to make it aligned with the rest of navbar elements?

html:

.btn {
  background-color: #1a73e8;
  color: white;
  align-self: center;
  border-radius: 4px;
  padding: 7px 25px;
}

<header>
  <ul class="menu">
    <li class="about">About</li>
    <li class="store">Store</li>
    <li class="gmail">Gmail</li>
    <li class="images">Images</li>
    <li class="btn">Sign in</li>
  </ul>
</header>

Basically the btn class has different properties compared to all the other li classes. What you need to do in this case is to give to the container header some directives on how to align all the children. Assign a class to the header and style it.

.headerClass {
   display: flex;
   align-items: center; /* This will align vertically in the center all the children elements */
   padding: 20px 0; /* Give a bit of padding to make the button breath */
}

Then I would advise not to style every single li element with a class but just style them all with the properties they will have in common like:

.headerClass ul li /* This will style only the li elements inside the header */
     width: 100%;
     display: flex;
     justify-content: center; /* this will horizontally center all the elements inside the li */
}

Then, if you need to add a button in the last list item, just write your html like that.

<header class="headerClass">
    <ul>
        <li><a href="#>About</a></li>
        <li><a href="#>Store</a></li>
        <li><a href="#>Gmail</a></li>
        <li><a href="#>Images</a></li>
        <li><a href="#"><button class="btn">Sign In</button></a></li>
    </ul>
</header>

From an HTML perspective, list items are not interactive elements, so you don't need to write any text into them, they are just a container for your links, buttons etc. Basically when clicking on "About" for example, you are clicking on the link so it is correct that you write it into an a tag.

If you want to style all the links in your unordered list, you can do it like that:

.headerClass ul li a {
    color: red;
}

.headerClass ul li a:hover {
    color: yellow;
}