Nav buttons changing sizes on each page - html

Question

this is the first ever website I am building from scratch and I am definitely jumping right in head first. I managed to get my index page complete and really like the buttons that I have for the navigation. The problem I am running into is the sizing. Everything on the index page is exactly how I want it, but when going to any other page the header becomes larger than what it is showing on the index and larger than what I want. I am new to scripting and still learning. Any help is appreciated!
I have tried messing with the sizes, margins, and padding of nav in .css but once things start going well on the pages I am trying to fix, it is affecting the index. I also tried messing with the formatting of the photo on the index page, but nothing I am doing seems to be doing the trick and searching for help is not getting me anywhere as I am not using query or react, etc.
I have thought about creating a separate div tag for these pages but that seems inefficient and uncommon in navigation tags!
Files > https://github.com/sumbernotas/Portfolio
<header>
<h1 class="logo">SB</h1>
<nav>
ABOUT
PROJECTS
CONTACT
</nav>
</header>
nav {
text-align: right;
width: 99%;
height: 90px;
margin: 20px;
padding-right: 15%;
position: absolute;
top: 20px;
}
nav a {
display: inline-block;
padding: 0.5em 1.7em;
margin: 0 4.2em 0.1em 0;
border: 0.16em solid rgb(46, 196, 182);
border-radius: 2em;
box-sizing: border-box;
text-decoration: none;
text-align: right;
font-family: "Futara";
font-weight: 300;
font-size: 30px;
color: #7B7B7B;
text-shadow: 0 0.04em 0.04em rgba(123, 123, 123);
transition: all 0.2s;
}
nav a:hover{
color: #FDFFFC;
background-color: #2EC4B6;
}