Trying to have header and unordered list on same line

Issue

I feel like an idiot asking this and I’ve scoured the internet looking for some answer and didn’t seem to find anything.

All I’m trying to do is have my header element and my unordered list on the same line without cancelling the specific margins both of them contain.

h3 {
  text-align: left;
  margin: 40px 0px 0px 40px;
}

ul {
  text-align: right;
}

ul li {
  list-style: none;
  display: inline;
  margin: 0px 20px 0px 0px;
}
<body>
  <h3 id="header"> Darius Spady </h3>
  <ul>
    <li> About </li>
    <li> Projects </li>
    <li> Contact </li>
  </ul>
</body>

Any help would be appreciated! Thank you!

Solution

I would introduce a parent element and use display: flex; justify-content: space-between; to put them on the same line, separated by the available white space. You can use align-items to vertically align them as well.

* {margin:0;padding:0;}

ul li {
  list-style: none;
  display: inline;
  margin: 0px 20px 0px 0px;
}

h3 {
  margin: 40px 0px 0px 40px;
}

.flex {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
<header class="flex">
  <h3 id="header"> Darius Spady </h3>
  <ul>
    <li> About </li>
    <li> Projects </li>
    <li> Contact </li>
  </ul>
</header>

Answered By – Michael Coker

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published