Having a heading on one side and a list on another-CodePudding

So I have my h1 and h3 set to the left of my screen but inline with them, on the right, I would like my list to be but at the moment it is underneath the h elements.

header h1, h3 {
    margin-top: 60px;
    margin-bottom: 0%;
    margin-left: 100px;
}

header h3 {
    margin-top: 0%;
}

header li {
    display: inline;
    list-style: none;
}

<header>
    <h1>NAME</h1>
    <h3>ASPIRING WEB DEVELOPER</h3>
    <ul>
        <li>Home</li>
        <li>Projects</li>
        <li>About Me</li>
        <li>Contact info</li>
    </ul>
</header>

CodePudding user response：

Are you looking for something like this?

header h1, h3 {
    margin-top: 60px;
    margin-bottom: 0%;
    margin-left: 100px;
}

header h3 {
    margin-top: 0%;
}

header li {
    display: inline;
    list-style: none;
}
header {
  display: flex;
}

<header>
    <div>
      <h1>NAME</h1>
      <h3>ASPIRING WEB DEVELOPER</h3>
    </div>
    <div>
      <ul>
          <li>Home</li>
          <li>Projects</li>
          <li>About Me</li>
          <li>Contact info</li>
      </ul>
    </div
</header>

CodePudding user response：

You can use flex like this:

header{
  display:flex;
  justify-content: space-between;
}
.headings{
  display:flex;
}
header{
    margin-top: 60px;
    margin-bottom: 0%;
    margin-left: 100px;
}

header h3,h1 {
    margin-top: 0%;
}

header li {
    display: inline;
    list-style: none;
}

<header>
    <div >
      <h1>NAME</h1>
      <h3>ASPIRING WEB DEVELOPER</h3>
    </div>
    <ul>
        <li>Home</li>
        <li>Projects</li>
        <li>About Me</li>
        <li>Contact info</li>
    </ul>
</header>