HTML- Is there anything I can do to make my sticky navbar to work?

Question

I've been trying to make a sticky navbar but its not working i've tried z-index: 999 but it does'nt work.

* {
  margin: 0;
  padding: 0;
}

.navbar {
  display: flex;
  align-items: center;
  justify-items: center;
  position: sticky;
  top: 0;
  cursor: pointer;
  z-index: 999;
}

.nav-list {
  background-color: #222c36;
  width: 100%;
  height: 50%;
  display: flex;
  align-items: center;
}

.nav-list li {
  list-style: none;
  padding: 26px 20px;
}

.nav-list li a {
  text-decoration: none;
  size: 42;
  color: #ffff;
}

.nav-list li a:hover {
  color: #3b92d1;
}

.logo img {
  width: 20%;
  border: 3px solid white;
  border-radius: 50px;
}

.logo {
  width: 20%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.background {
  background: rgba(0, 0, 0, 0.7) url('../img/bg.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-blend-mode: darken;
}

.firstSection {
  height: 100vh;
}

.firstHalf {
  width: 80%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.secondHalf {
  width: 30%;
}

.secondHalf img {
  display: block;
  margin: auto;
}

.box-main {
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-family: 'Roboto Condensed', sans-serif;
  max-width: 50%;
  margin: auto;
  height: 90%;
}

html,
body {
  max-width: 100%;
  max-height: 100%;
  overflow-x: hidden;
}

.site {
  overflow: hidden;
}

<nav class="navbar">
  <ul class="nav-list">
    <div class="logo"><img src="img/logo.jpg" alt="logo"></div>
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#portfolio">Portfolio</a></li>
    <li><a href="#resume">Resume</a></li>
    <li><a href="#contact">Contact Me</a></li>
  </ul>
</nav>
<section class="background firstSection">
  <div class="box-main">
    <div class="firstHalf">
      <p class="text-big">Aadyant Chaturvedi</p>
      <p class="text-small">Unity Game Developer</p>
      <div class="buttons">
        <button class="btn">Github</button>

      </div>
    </div>

    <div class="secondHalf">
      <img src="img/email_icon.png" alt="gmail" width="100%">
    </div>
  </div>
</section>

Answer 1

* {
  margin: 0;
  padding: 0;
}

html,
body {
  max-width: 100%;
  max-height: 100%;
  /* overflow-x: hidden;  /*comment this line */
}

.site {
  overflow: hidden;
}
.navbar {
  display: flex;
  align-items: center;
  justify-content: center; /* should be justify-content: center*/
  position: sticky;
  top: 0;
  cursor: pointer;
  z-index: 999;
}

.nav-list {
  background-color: #222c36;
  width: 100%;
  height: 50%;
  display: flex;
  align-items: center;
}

.nav-list li {
  list-style: none;
  padding: 26px 20px;
}

.nav-list li a {
  text-decoration: none;
  size: 42;
  color: #ffff;
}

.nav-list li a:hover {
  color: #3b92d1;
}

.logo img {
  width: 20%;
  border: 3px solid white;
  border-radius: 50px;
}

.logo {
  width: 20%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.background {
  background: rgba(0, 0, 0, 0.7) url('../img/bg.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-blend-mode: darken;
}

.firstSection {
  height: 100vh;
}

.firstHalf {
  width: 80%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.secondHalf {
  width: 30%;
}

.secondHalf img {
  display: block;
  margin: auto;
}

.box-main {
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-family: 'Roboto Condensed', sans-serif;
  max-width: 50%;
  margin: auto;
  height: 90%;
}

    <nav class="navbar">
        <ul class="nav-list">
            <div class="logo"><img src="img/logo.jpg" alt="logo"></div>
            <li><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#portfolio">Portfolio</a></li>
            <li><a href="#resume">Resume</a></li>
            <li><a href="#contact">Contact Me</a></li>
        </ul>
    </nav>
    <section class="background firstSection">
        <div class="box-main">
            <div class="firstHalf">
                <p class="text-big">Aadyant Chaturvedi</p>
                <p class="text-small">Unity Game Developer</p>
                <div class="buttons">
                    <button class="btn">Github</button>

                </div>
            </div>

            <div class="secondHalf">
                <img src="img/email_icon.png" alt="gmail" width="100%">
            </div>
        </div>
    </section>
      <section class="background firstSection">
        <div class="box-main">
            <div class="firstHalf">
                <p class="text-big">Aadyant Chaturvedi</p>
                <p class="text-small">Unity Game Developer</p>
                <div class="buttons">
                    <button class="btn">Github</button>

                </div>
            </div>

            <div class="secondHalf">
                <img src="img/email_icon.png" alt="gmail" width="100%">
            </div>
        </div>
    </section>

Comment overflow-x:hidden in body

Answer 2

In your navbar class, use this

.navbar{
display: flex;
align-items: center;
justify-items: center;
width: 100vw;
position: fixed;
top: 0;
left: 0;
cursor: pointer;
z-index: 999;
}