Trying to have header and unordered list on same line

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>