Make navigation bar to lef side of the page

I have tried every possible way to move navigation bar to left and keeping rest of the page in the between not below the navigation bar, following is the code I am making changes to. If anyone could help, Thank you.

HTML

<nav role ="navigation" class="navbar">
          <ul>
            <a href={{ url_for('index') }}><li>Tools</li></a>
            <a href={{ url_for('certification') }}><li>Certification</li></a>
            <li><a href="#">Application1</a>
              <ul class="dropdown">
                <a href={{ url_for('accessing') }}><li>Access</li></a>
                <a href={{ url_for('loading_maintenance') }}><li>Maintenance</li></a>
                <a href={{ url_for('summary') }}><li>Summary</li></a>
                <a href={{ url_for('loading_report') }}><li>Report</li></a>
              </ul>
            </li>
            <li class="disabled">Application2
              <!-- <ul class="dropdown">
                <li><a href="#">How to access</a></li>
                <li><a href="#">Summary</a></li>
              </ul> -->
              
            </li>
            <a href={{ url_for('application3') }}><li>Application3</li></a>
          </ul>
        </nav>

CSS

.navbar ul {
  background: #006ac3;
  list-style: none;
  margin: 0;
  padding-left: 0;
  display: flex;
  justify-content: space-evenly;
  width: 100%;
}

.navbar li {
  margin-left: 0;
  color: #fff;
  background: #006ac3;
  display: block;
  float: left;
  padding: 1rem;
  position: relative;
  text-decoration: none;
  transition-duration: 0.5s;
  width: 100%;
  text-align: center;
  font-size: 20px;
}

.navbar a {
  width: 100%;
}

.navbar li a {
  color: #fff;
}

.navbar li:hover,
.navbar li:focus-within {
  background: #ffc72c;
  cursor: pointer;
}

.navbar li:focus-within a {
  outline: none;
}

.navbar ul li ul {
  background: #006ac3;
  visibility: hidden;
  opacity: 0;
  min-width: 5rem;
  position: absolute;
  transition: all 0.5s ease;
  margin-top: 1rem;
  left: 0;
  display: none;
}

.navbar ul li:hover > ul,
.navbar ul li:focus-within > ul,
.navbar ul li ul:hover,
.navbar ul li ul:focus {
  visibility: visible;
  opacity: 1;
  display: block
}

.navbar ul li ul li {
  clear: both;
  width: 100%;
}

.dropdown li {
  text-align: left;
}

This is what it looks right now This is what I am expecting to make it look like

You can put on the left by setting a width for the navbar and adding flex-direction:column; to .navbar ul

p.s: I suggest put the navbar in a container so later you can add other tags on the right side of it

.navbar{
  width:200px;
}
.navbar ul {
  background: #006ac3;
  list-style: none;
  margin: 0;
  padding-left: 0;
  display: flex;
  flex-direction:column;
  justify-content: space-evenly;
  width: 100%;
}

.navbar li {
  margin-left: 0;
  color: #fff;
  background: #006ac3;
  display: block;
  float: left;
  padding: 1rem;
  position: relative;
  text-decoration: none;
  transition-duration: 0.5s;
  width: 100%;
  text-align: center;
  font-size: 20px;
}

.navbar a {
  width: 100%;
}

.navbar li a {
  color: #fff;
}

.navbar li:hover,
.navbar li:focus-within {
  background: #ffc72c;
  cursor: pointer;
}

.navbar li:focus-within a {
  outline: none;
}

.navbar ul li ul {
  background: #006ac3;
  visibility: hidden;
  opacity: 0;
  min-width: 5rem;
  position: absolute;
  transition: all 0.5s ease;
  margin-top: 1rem;
  left: 0;
  display: none;
}

.navbar ul li:hover > ul,
.navbar ul li:focus-within > ul,
.navbar ul li ul:hover,
.navbar ul li ul:focus {
  visibility: visible;
  opacity: 1;
  display: block
}

.navbar ul li ul li {
  clear: both;
  width: 100%;
}

.dropdown li {
  text-align: left;
}

<nav role ="navigation" class="navbar">
          <ul>
            <a href={{ url_for('index') }}><li>Tools</li></a>
            <a href={{ url_for('certification') }}><li>Certification</li></a>
            <li><a href="#">Application1</a>
              <ul class="dropdown">
                <a href={{ url_for('accessing') }}><li>Access</li></a>
                <a href={{ url_for('loading_maintenance') }}><li>Maintenance</li></a>
                <a href={{ url_for('summary') }}><li>Summary</li></a>
                <a href={{ url_for('loading_report') }}><li>Report</li></a>
              </ul>
            </li>
            <li class="disabled">Application2
              <!-- <ul class="dropdown">
                <li><a href="#">How to access</a></li>
                <li><a href="#">Summary</a></li>
              </ul> -->
              
            </li>
            <a href={{ url_for('application3') }}><li>Application3</li></a>
          </ul>
        </nav>