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 trialAlex G.
10,329 PointsLogo and Nav stacked instead of left/right
See screenshot:
https://drive.google.com/file/d/0B4UUTDzy3z1xQ3JNRXczd1g2N0E/view?usp=sharing
It looks like the total width is equal to more than 100%, but my code totals to exactly 100%:
@media screen and (min-width: 660px) {
/********************************** HEADER **********************************/
nav { background: none; float: right; font-size: 1.125em; margin-right: 5%; text-align: right; width: 45%; border: 2px solid black; }
#logo { float: left; margin-left: 5%; text-align: left; width: 45%; border: 2px solid black; }
2 Answers
Alex G.
10,329 PointsFixed it by downloading the project file and comparing code. The reason why was my main.css had the margin in "nav" a bit off. My code:
nav { text-align: center; padding: 10px 0; margin: 20px; }
whereas it should have been this:
nav { text-align: center; padding: 10px 0; margin: 20px 0 0; }
james south
Front End Web Development Techdegree Graduate 33,271 Pointsi think if you cut the widths just a little it will fit. you've got borders, they may be taking up room that isn't accounted for.
Alex G.
10,329 PointsAlex G.
10,329 PointsHere's a snapshot of my workspace:
https://w.trhou.se/xl6wrvjagz