I want my navbar to start from the left most side of the screen and NOT exceed the right side. and the background color to cover the whole side in the screenshot below, the background color is not covering the screen

HTML code

   <div class="mainWorkDone"> 
                <div class="navbar">
                    <div class="nav2">
                        <h3>Maryam</h3>
                        <a href="#experience">Experience</a>
                        <a href="#education">Education</a>
                        <a href="#workDone">Work </a>
                        <a href="#contact">Contact</a>
                   </div>
                </hr>
                </div>
        </div>

css code

@media screen and (max-height: 450px) {
  .nav2 {
    padding-top: 15px;
    display: flex;
    width: 500px;
    justify-content: start;
  }
  .nav2 a {
    font-size: 15px;
  }
  .nav2 h3 {
    visibility: hidden;
  }
}


.nav2 {
  height: 100%; /* Full-height: remove this if you want "auto" height */
  width: 160px; /* Set the width of the sidebar */
  position: fixed; /* Fixed Sidebar (stay in place on scroll) */
  z-index: 1; /* Stay on top */
  top: 0; /* Stay at the top */
  left: 0;
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 20px;
  color: white;
  border: 2px solid black;
}

/* The navigation menu links */
.nav2 a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
}

.nav2 h3 {
  color: white;
  font-family: "Inspiration", cursive;
  font-size: 30px;
  color: black;
  justify-content: center;
  display: flex;
}