How to spread out the navbar attributes evenly?

Instead of it all being to the left how do i go about spreading it all across evenly or near enough? I have tried reading some blogs and posts on how to solve this solution however i still have not came to a conclusion.

Also how do i put the logo and heading side by side each other?

Thanks in advance, much appreciated.

Solution

.header img {
  width: 100px;
  height: 100px;
  background: #555;
}

.header h1 {
  display: inline;
}

ul {
  display: flex;
  justify-content: space-around;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  display: inline-block;
}

li a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="main.css">

  <title>Chollerton Tearooms</title>
</head>

<body>

  <div class="header">
    <img src="Logo.png" alt="logo" />
    <h1>Chollerton Tearooms</h1>
  </div>

  <ul>
    <li><a class="" href="index.html">Home</a></li>
    <li><a href="index.html">Find out more</a></li>
    <li><a href="index.html">Credits</a></li>
    <li><a href="Wireframe.html">Wireframe</a></li>
    <li><a href="index.html">Admin</a></li>
  </ul>

</body>

</html>

flexbox to the rescue!

As for header - h1 has display:block by default so i've change it to display: inline;