Putting the nav bar and header on one line-CodePudding

Click here to see what it all looks like right now

So basically, I am currently trying to put both my nav bar and header on the same line (which I seem to have somehow achieved) but I want to have the header to the left and nav to the right and not back to back like they are right now. I'm pretty new at html and css so I'm sorry to be this clueless.

HTML:

<h4 id="Logo">My Portfolio</h4>

<nav>

  <ul class="navbar">

    <li><a href="Home.html">Home</a></li>
    <li><a href="Education.html">Education</a></li>
    <li><a href="About Me.html">About Me</a></li>
    <li><a href="Contact.html"></a></li>

  </ul>
  
</nav>

CSS:

    *{
background-color: #a989d6;
}

body{margin-left: 10%; 
margin-right: 10%;
margin-top: 2em;}

header{
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
}

h4{
display: inline-block; 
}

.navbar{
display: inline-block;
}

nav a{
text-decoration: none;
}

CodePudding user response：

You could wrap h4 and nav in some common container, and use flex with justify-content: space-between

<div class="container">
<h4 id="Logo">My Portfolio</h4>
<nav class="navbar">
    <a href="Home.html">Home</a>
    <a href="Education.html">Education</a>
    <a href="About Me.html">About Me</a>
    <a href="Contact.html">Contact</a>
  </ul>
</nav>
<div>

and CSS class for container

.container {
  display: flex;
  justify-content: space-between;
  align-items:center;
}

CodePudding user response：

You could use a bootstrap 4 layout. But if not then you can do something as follow -

<div class="parentDiv">
<h4 id="Logo">My Portfolio</h4>
<nav class="navbar">
<a href="Home.html">Home</a>
&nbsp;
<a href="Education.html">Education</a>
&nbsp;
<a href="About Me.html">About Me</a>
&nbsp;
<a href="Contact.html">Contact</a>
</div>

and css is -

*{
  background-color: #a989d6;
}
body{margin-left: 10%; 


margin-right: 10%;
  margin-top: 2em;}
  header{
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
  }



.parentDiv {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  nav a{
  text-decoration: none;
  }