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

Phil White
Courses Plus Student 9,519 PointsProblem with paragraph riding up into header
Hi,
Ive just started trying to play around and make a basic site but have got stuck early on with a problem. My paragraph text is riding up into my header and over laying it. I've sat here for the last hour at least trying to work it out but had no luck.

Phil White
Courses Plus Student 9,519 Pointsh1 {
text-align: center;
margin-bottom: 0;
margin-left: 10px;
float: left;
}
nav {
text-align: center;
padding: 10px 0;
margin: 20px 0 0;
float: right;
}
nav ul {
list-style: none;
margin: 0 10px;
padding: 0;
}
nav li {
display: inline-block;
}
nav a {
font-weight: 800;
padding: 15px 10px;
text-align: center;
}
2 Answers

Jason Anello
Courses Plus Student 94,610 PointsHi Phil,
This is because your header has floated elements and your paragraph is not clearing those floated elements.
If you add:
p {
clear: both;
}
Your paragraph will then drop below all previously floated elements.

Phil White
Courses Plus Student 9,519 PointsHi Jason,
Thank you so much, problem solved! Appreciated!

Jason Anello
Courses Plus Student 94,610 PointsYou're welcome.
I should have added that whatever element follows the header
is the one that you want to clear the floated elements. Right now it's the paragraph but as you build out the page you will most likely have a major containing block right after the header.
Like <section>
or <div id="wrapper'>
So you'll want to apply that clear: both
to whatever element you eventually have following the header.
This is very similar to putting a clear:both;
in your footer if your main content area contains floated columns. This forces the footer to drop below previously floated items.

Phil White
Courses Plus Student 9,519 PointsOkay ill keep that in mind, thank you again

Jason Anello
Courses Plus Student 94,610 PointsAlso, note the improperly closed link in your nav that christopher smith pointed out.
There seems to be a lot of christopher smith's here. Hope I tagged the right one.

Phil White
Courses Plus Student 9,519 PointsYeah did that, Thx chris

christopher smith
5,831 PointsNo matter where I go, there's another Chris Smith lol.
Glad you got it fixed!

Jason Anello
Courses Plus Student 94,610 PointsI can't say I had noticed before but when I tried to tag you there must have been at least 6 or 7 that showed up and none of them were you. i had to go back and do a lowercase 'c'. Maybe that's why you used a lowercase 'c'. To differentiate yourself from your clones. :)

christopher smith
5,831 PointsIt doesn't do it in chrome but i noticed your a tag for contact is missing the /
Phil White
Courses Plus Student 9,519 PointsPhil White
Courses Plus Student 9,519 Points