So I have a navbar, and in this navbar I have the logo, the options and then the button. Whenever I apply padding to the button it pushes everything else to the left? Any advice cause I have never had this happen before. This happens with other stuff as well, so if I give the logo any padding it also pushes the items around. Why is this happening because I watched some tutorials just to be sure and I have no clue what I am doing wrong. Also just wanted to add that align-items: center also isn't working.
* { margin: 0; padding: 0; box-sizing: border-box;}html { font-size: 10px;}.container { height: auto; width: 100%; /* overflow: hidden; */}.section1 { background: rgb(180, 135, 238); background: linear-gradient(90deg, rgba(180, 135, 238, 1) 0%, rgba(148, 187, 233, 1) 100%);}.logo { font-size: 4rem; font-family: "Protest Revolution", sans-serif; font-weight: 400; font-style: normal; color: white; margin-bottom: 10px; margin-left: -10px;}.navbar { width: 100%; font-family: 'Montserrat', sans-serif; background: rgb(180, 135, 238); background: linear-gradient(90deg, rgba(180, 135, 238, 1) 0%, rgba(148, 187, 233, 1) 100%); display: flex; justify-content: space-between; align-items: center; padding: 25px 40px; position: sticky; top: 0; z-index: 99999;}.nav-buttons li { font-weight: 500; font-size: 1.7rem; display: inline-block; padding: 20px; list-style: none;}.nav-buttons li a { color: white; text-decoration: none;}.navbar .sign-up { color: white; font-size: 1.5rem; text-decoration: none; border: 2px solid white; border-radius: 5px; padding: 8px 50px 8px 50px;}<div class="container"><section class=section1><div class="navbar"><label class="logo">appy</label><ul class="nav-buttons"><li><a href="#">Home</a></li><li><a href="#">About</a></li><li><a href="#">Pricing</a></li><li><a href="#">Features</a></li><li><a href="#">FAQ</a></li></ul><a href="#" class="sign-up">SIGN UP</a></div></section></div>