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 trialMerianna Kachadurian
904 Pointsfooter issues
The footer is moving to the right side of the page, i read a simliar question but there was no answer! so what should i do?
footer {
text-align: center;
font-size: 1em;
padding-top: 50px;
color: #ccc;
}
<footer>
<a href="http://twitter.com"><img src="img/twitter-wrap.png"></a>
<a href="http://facebook.com"><img src="img/facebook-wrap.png"></a>
<p> © Marianna Khachadourian</p>
</footer>
</div>
</body>
</html>
2 Answers
Josué Rodriguez
Front End Web Development Techdegree Graduate 24,118 PointsIt's probably a clearing issue. Try adding the following to your css:
footer {
clear: both;
}
Merianna Kachadurian
904 Pointsthat worked! thanks.
Michael Lambert
6,286 PointsThe problem has occurred because the container for the 'ul' elements has collapsed, ie, the 'section' element is no longer containing the list items that it contains. Using the clear:both does fix the problem but it's not the best way to fix the issue and here's why. Say you wanted to add a border to the 'section' element, it wouldn't work as you would expect due to it no longer containing your list items (portfolio).
In order to solve both the floating issue and still have the 'section' element containing the list item elements (portfolio), should you ever want to add a border around it. Then add the below css just under your navigation section.
section {
overflow: hidden;
}
the above code will force the 'section' element to contain all the list item elements.
and if you wanted to have a border around your portfolio then you can do using the below.
section {
border: 1px solid black;
overflow: hidden;
}
Amrit Pandey
17,595 PointsAmrit Pandey
17,595 PointsCan You post whole code, that will be much help.