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>