Spaced out Navbar?

Question

So I am trying to create a navbar for a school project, however I cannot get all the buttons to be evenly spaced across the whole navbar. I have been trying to do this for a while now, and the navbar code is all messy which doesn't help my situation. Any solutons?

The HTML code is:

<ul>
  <li><a href="homepage.html"> <img src="Images/homepage/logo.png" width="20" height="20" href="#home"> </a></li>
  <div class="other";>
  <li><a href="films.html">Films</a></li>
  <li><a href="contact.html">Contact</a></li>
  <li><a href="about.html">About</a></li>
  <li><a href="faq.html">FAQ</a></li>
</div>
</ul>

The CSS code is:

ul {

list-style-type: none;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
z-index: 1;
top: 0;
left: 0;
width: 100%;
text-align: center;

}

li {

float: left;
}

li a {

display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
z-index: 1;
width: 100px;
}

li a:hover:not(.active) {
background-color: #111;
}

li a:hover{
text-decoration: none;
color: white;
}

.active {
background-color: #222;
color:white;
}

Please help, this has been confusing me for a while now and I would rather not write up a new navbar code unless absolutely necessary!

Answer 1

1. You can only nest li elements within the ul element. Nesting div inside the ul is not semantically correct. Also, the incorrectly nested div element within ul has a semicolon after its class name: this is not legal.
2. The flex box module is the best option to use in order to achieve what you are after. You can read more about it here.
3. One way to get the results you are after is as follows:

ul,
li,
a, 
img {
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
  border: 0px;
  height: 50px; /* Adjust this value to whatever height you want your nav to be */
}
ul {
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  list-style-type: none;
  background-color: #333;
  text-align: center;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
ul li {
 flex: 0 1 100%;
}
ul li a{
  display: block;
  color: white;
  text-decoration: none;
  line-height: 50px; /* This value should be the same as your nav's height is in order for text to stay centered. */
  padding: 0px 1em;
}
ul li a img {
  height: 100%;
  width: auto;
  padding: 5px; /*You can adjust this value to whatever you want. */
}
li a:hover:not(.active) {
  background-color: #111;
}
li a:hover{
  text-decoration: none;
  color: white;
}
.active {
  background-color: #222;
  color:white;
}

<ul>
  <li><a href="homepage.html"> <img src="https://www.w3.org/html/logo/downloads/HTML5_1Color_White.png" href="#home"> </a></li>
  <li><a href="films.html">Films</a></li>
  <li><a href="contact.html">Contact</a></li>
  <li><a href="about.html">About</a></li>
  <li><a href="faq.html">FAQ</a></li>
</ul>

I hope this is helpful.

Answer 2

Use Flex

ul{ display:flex;}
li{flex:1;}

* {
  margin: 0;
}

ul {
  display: flex;
  flex-direction: row;
  list-style-type: none;
  padding: 0;
  background-color: #333;
  position: fixed;
  z-index: 1;
  height: 50px;
  line-height: 50px;
  width: 100%;
}

li {
  flex: 1;
}

li a {
  display: block;
  color: white;
  text-align: center;
  text-decoration: none;
  z-index: 1;
}

li a:hover:not(.active) {
  background-color: #111;
}

li a:hover {
  text-decoration: none;
  color: white;
}

.active {
  background-color: #222;
  color: white;
}

img {
  margin: -15px;
}

<ul>
  <li>
    <a href="homepage.html"> <img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/68dd54ca-60cf-4ef7-898b-26d7cbe48ec7/10-dithering-opt.jpg" width="40" height="40px" href="#home"> </a>
  </li>
  <li><a href="films.html">Films</a></li>
  <li><a href="contact.html">Contact</a></li>
  <li><a href="about.html">About</a></li>
  <li><a href="faq.html">FAQ</a></li>
  </div>
</ul>