Padding pushing items in a flex div?

Question

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>

Answer 1

Your flex container (.navbar) is spacing flex items using justify-content: space-between. This means that the width of each item will depend on the free space on the row (that's the space left over after the content consumes its space). When you add padding to the logo or the button, that consumes free space, which redistributes the remaining free space, shifting items around. If you want the sizes to be fixed, used fixed widths, not distribution of free space.