Gap between heading and navigation

Question

Beginner here.

I'm trying to figure out how to put 5 elements on my nav bar. First element is heading and the other for are li's.

Hopefully someone can help!

I want to get the following result: each element fills up 20% of the width But what I get is this. Not equally distributed space

Below the snippet.

body {
  width: 960px;
  margin: auto;
  background-color: slateblue;
}

#navigation {
  background-color: white;
  width: 960px;
}

#navigation h2 {
  display: inline;
  width: 20%;
  background-color: #555;
  margin: 0;
  font-size: 18px;
  color: #ffa0a0;
  margin: 0;
}

#navigation ul {
  list-style-type: none;
  display: inline;
  font-size: 0px;
  margin: 0;
}

#navigation ul a {
  display: inline-block;
  width: 20%;
  background-color: #555;
  font-size: 18px;
  color: #ffa0a0;
  text-align: center;
  margin: 0;
}

<!DOCTYPE html>
<html>

<head>
  <title>Pagename</title>
  <link rel="stylesheet" type="text/css" href="css/style.css">
</head>

<body>
  <div id="navigation">
    <h2>Pagename</h2>
    <ul>
      <a href="#">
        <li>Home</li>
      </a>
      <a href="#">
        <li>Services</li>
      </a>
      <a href="#">
        <li>Portfolio</li>
      </a>
      <a href="#">
        <li>Contacts</li>
      </a>
    </ul>
  </div>
</body>

</html>

Does my answer suit your question? – Amessihel Nov 22 '18 at 23:08 — Amessihel, Nov 22 '18 at 23:08

score 0 · Answer 1 · answered Oct 23 '18 at 19:05

You can achieve this easily by using flexbox feature. I slightly edited your code to

replace ul by a div element (since you don't use li items)
replaced body width by 100% to make it working with the snippet display (this one is just for a good-looking display in the answer, you can replace it by your pixel value. Also div width style is by default set to 100% (it's a block displayed item), you don't need to set it for the div#navigation element.

Update. I added the Pagename heading to the equally distributed items to fit the design you want (according to the screenshot).

body {
  width: 100%;
  margin: auto;
  background-color: slateblue;
}

#navigation {
  background-color: white;
}



#navigation #nav-items {
  list-style-type: none;
  justify-content:space-between;
  display: flex;
  font-size: 0px;
  margin: 0;
}

#navigation h2 {
  background-color: #555;
  margin: 0;
  font-size: 18px;
  color: #ffa0a0;
  margin: 0;
}

#navigation #nav-items a {
  background-color: #555;
  font-size: 18px;
  color: #ffa0a0;
  text-align: center;
  margin: 0;
}

<!DOCTYPE html>
<html>

<head>
  <title>Pagename</title>
  <link rel="stylesheet" type="text/css" href="css/style.css">
</head>

<body>
  <div id="navigation">
    <div id="nav-items">
      <h2>Pagename</h2>
      <a href="#">
        <li>Home</li>
      </a>
      <a href="#">
        <li>Services</li>
      </a>
      <a href="#">
        <li>Portfolio</li>
      </a>
      <a href="#">
        <li>Contacts</li>
      </a>
    </div>
  </div>
</body>

</html>

Gap between heading and navigation

1 Answers1