CODEWITHSUNDEEP
htmlcss
Jason
Jason

Reputation: 209

Problems aligning navigation with logo in header

simple issue with some CSS I'm having trouble fixing that I was wondering if you could help me out with. I have a simple header with the logo to the left and the nav to the right (both floats). I have the nav and its list tied together and the logo within the header as a simple ID "logo". For now, the logo won't go on the same line as the nav, so I am faced with my logo taking up a good portion of the left side of the header, and my nav (much smaller in size) taking up the right side. I want them to be on the same line (though not both in the nav) so I can manage the margins and paddings separetly. Here is my code:

<header>
    <a href="index.html" id="logo">
    <img src="img/logo.png">
    </a>

<nav>
     <ul>
        <li><a href="index.html" class="selected">Portfolio</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="contact.html">Contact</a></li>
     </ul>

</nav>
</header>

CSS:

header{
  float: left;
  margin: 0 0 15px 0;
  padding: 5px 0 -60px 0;
  min-width: 100%;
  width: 100%;
}

#logo {
 margin: 5px 0 0 70px;
 padding-top: 7px;
 display: inline-block;
 max-width: 100%;
}


/***************
NAVIGATION
****************/

nav {
  text-align: center;
  padding: 10px 0;
  margin: 5px 0 0 5px;
}

nav ul {
  list-style: none;
  margin: 0 30px;
  padding: 0 30px 0 0;
  float: right;
}
nav li{
  display: inline-block;
  font-size: 1.5em;
}

nav a{
  font-weight: 800;
  color: #fff;
  padding: 5px 10px 2px;
}

Many thanks!

Upvotes: 1

Views: 90

Answers (1)

Joe Smith
Joe Smith

Reputation: 244

Either set header's
display: inline-block; or display: inline;

or give each header element a div container with the same class and set the display to inline or inline-block for that class

Upvotes: 1

Related Questions