How do I move my navigation items to the right of the screen?

Question

This seems to be the one thing thats still escaping me when working on HTML pages. I always struggle to move things into exactly the rigth place. How would you go about moving the 3 nav elements (Home, About, Projects) over to the right hand side of the screen?

.header {
  background-color: gray;
  display: flex;
  border: solid 2px black;
  max-height: 100px;
}

.header .ul .nav_list {
  display: flex;
}

.logo img {
  border: solid 2px black;
  max-height: 100%;
}

.nav_list {
  border: solid 2px black;
  text-decoration: none;
}

.nav_list li {
  border: solid 2px black;
  list-style-type: none;
  
}

<head>
  <div class="header">
    <div class="logo"><img src="https://static.vecteezy.com/system/resources/thumbnails/004/753/002/small/custom-coding-icon-shadowed-detailed-custom-coding-logo-free-vector.jpg"></div>
    <div class="ul"> 
      <ul class="nav_list">
        <li>Home</li>
        <li>About</li>
        <li>Projects</li>
      </ul>
   </div>
  </div>
</head>

Youssouf Oumar · Accepted Answer · 2022-06-17T14:15:07.617

You coud set justify-content : space-between on .header, that's it. Though I made some additional improvements to your UI and code, feel free to ignore them if you want.

.header {
  background-color: gray;
  display: flex;
  justify-content:space-between;
  align-items:center;
  border: solid 2px black;
  max-height: 100px;
}

.logo img {
  width:70px;
  display:block
}

.nav_list {
  text-decoration: none;
  display:flex;
  gap:1rem;
  list-style-type: none;
}

<div class="header">
  <div class="logo"><img src="https://static.vecteezy.com/system/resources/thumbnails/004/753/002/small/custom-coding-icon-shadowed-detailed-custom-coding-logo-free-vector.jpg"></div>
  <ul class="nav_list">
    <li>Home</li>
    <li>About</li>
    <li>Projects</li>
  </ul>
</div>

How do I move my navigation items to the right of the screen?

1 Answers1