Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Marisa Zantey
Marisa Zantey
2,053 Points

Code errors

Hey guys, I was just brushing up on my skills and working on a random project. It's not even nearly finished yet and there's still loads I need to do haha, but I have some problems I need answers to if you guys have some time!! :D

https://w.trhou.se/510hfnw61r

-The navigation won't go into my header -I am for some reason unable to move my h1 and h2 right with the margin and padding codes? I want to give it some space from the left side of the page!!

I think that's all... I'll post a comment if I find anything else I need looked at!! Sorry if it's just a simple stupid thing i'm missing haha :)

3 Answers

myackley35
myackley35
34,574 Points

Hey Marisa!

If you're shooting for having the "logo" area on the left and the nav on the right you'll probably want to float your elements like so after reorganizing your markup:

<header>
  <div class="logo">
    <a href="index.html" class="logo">
      <h1> Entertainment Fix </h1> 
      <h2> Good, fresh entertainment </h2>  
    </a>
  </div>

  <nav>
    <ul>
      <li> <a href="index.html" class="selected">  Home </a> </li> 
      <li><a href="about.html"> Jokes </a></li>
      <li><a href="contact.html"> Other </a></li>
    </ul>
   </nav>
</header>

CSS:

header {
 width: 100%;
 background: linear-gradient(to top right, #76EE00, #66CD00, #458B00);
 border-bottom: 4px solid;
 border-color: #608341;
}
/* clears the floats...or use whatever clearfix method works for you */
header:after {
  clear:left;
  content: " ";
  display: inline-block;
}

.logo {
  float: left;
  width: 30%;
}
.logo a {
  display: block; /* this should make the h1 and h2 more clickable */
}

nav {
  float: left;
  width: 70%;
}

This should get you pretty close to what you're wanting to do.

I hope this helps!

Marisa Zantey
Marisa Zantey
2,053 Points
Marisa Zantey
Marisa Zantey
2,053 Points

hm it kind of worked... but it's pushed my header up and made it small, and now my main heading (#logo) and my navigation are outside of my header (below it). But everything is in the correct place, like the #logo is on the left and the navigation's on the right...

Would you be able to help me out a bit sorry?? Haha i'm still a bit new at this xD

Marisa Zantey
Marisa Zantey
2,053 Points
Marisa Zantey
Marisa Zantey
2,053 Points

Aah it's alright... "overflow:hidden" works wonders :D

Thanks so much anyway!!