How do I get nav bar and logo on same line

HTML-CSS
1

Title is pretty much it. Doing the product landing page HTML/CSS project and I’m trying to get the nav links on the same horizontal line as the logo, as seen in the example. And how do I get it to the far right?

Here’s what I have so far:

<header id="header">
  <div class="logo">
    <img alt="movers logo" id="header-img" src="https://www.logotreasure.com/logos/logotreasure_540x340_1421937114.jpg" width="150" />

      <nav id="nav-bar">
        <ul>
          <li><a class="nav-link" href="#Services">Services</a></li>
           <li><a class="nav-link" href="#pricing">Pricing</a></li>
   
</header>
</nav>

li {
  float: left;
  list-style: none;
  font-family: Tahoma;

}

a {
  display: block;
  padding: 8px;
  background-color: #dddddd;
}
3

Hi @Champigne, one of the user stories calls for you to use CSS flexbox at least once. This is a good place to use it.

4

Hey @Champigne
I suggest doing it like this, and make adjustment from there

Important is to use display: inline; or
maybe better display: inline-block;
In this example logo is part of the list

<style>
.nav-bar {
  background-color: yellow; 
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.nav-bar li {
	
  display: inline;
  font-size: 20px;
  padding: 15px;
}
</style>

<nav>
<ul class="nav-bar">
<li><img src="https://www.logotreasure.com/logos/logotreasure_540x340_1421937114.jpg" width="150"/></li>
  <li><a href="#home">Home</a></li>
  <li><a href="#about">About Us</a></li>
  <li><a href="#clients">Our Clients</a></li>  
  <li><a href="#contact">Contact Us</a></li>
</ul>
</nav>
1 Like