How to spread out the navbar attributes evenly?

Question

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.

Possible duplicate of [How do I justify a horizontal list?](https://stackoverflow.com/questions/6879467/how-do-i-justify-a-horizontal-list) — PEPEGA, Nov 20 '18 at 14:07

Smollet777 · Accepted Answer · 2018-11-20T13:40:16.977

.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;

score 1 · Answer 2 · answered Nov 20 '18 at 13:32

Flexbox is ideal for this. Add display: flex to the parents css and flex: 1 to the li, so they occupy the full width of the viewport. display: block for the a-tag allows the whole space to be clickable, but that's more of a design decision.

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

li {
    flex: 1;
}

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

<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>

How to spread out the navbar attributes evenly?

2 Answers2