Objects not resizing properly

Question

I'm new to HTML and kind of a noob. I have this navbar i'm working on, and i put the background of it as an image (shown in the gif). the navbar resizes properly according to the size of the screen, but the "Menu" and "Contact us" seem to not resize that well.. May someone please help me with this? I am also planning to make the "Menu" a drop down menu, but I can hopefully do that on my own. Here is the gif: https://i.gyazo.com/239672fae87ceffb09e66f2da9faa680.gif

main {
  width: 100% min-height: 100%;
}

.NavigationBar {
  height: 46px;
  align-items: center;
  padding: 0 10px;
  border: 1px solid rgba(238, 238, 238, 1);
  border-radius: 5px;
  color: rgba(117, 117, 117, 1);
  box-shadow: 5px 10px 20px -20px rgba(85, 172, 238, 1);
  background: url(WiderLogo.png);
  background-size: 100% auto;
  height: 9em;
  background-repeat: no-repeat;
  position: relative;
}

ul.NavigationBar {
  font-size: 30px;
  padding: 0;
  list-style: none;
}

ul.NavigationBar li {
  margin: 20px;
  margin-top: 37px;
  color: #353535;
}

.menu {
  float: left;
}

.contact {
  float: right;
}

<ul class="NavigationBar" role="navigation">
  <li class="menu"><i class="fa fa-chevron-circle-down"></i> Menu</li>
  <li class="contact"><i class="fa fa-users"></i> Contact Us</li>
</ul>

Thank you!

Answer 1

This could help your answer, since it's a similar problem.

Also you're missing a ";" at the end of the 2nd line in your css code at

main {
width: 100%
min-height: 100%;
}

EDIT: deleted part about missing unit definition. Thanks for the comment @Lars Beck.