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
Lindsay Barrett
Python Web Development Techdegree Student 7,357 PointsNavigation Breaking
Hello!
When I resize my browser, my navigation bar causes the header and the Main class elements to break. An empty white space slides in between the two elements and then the navigation bar slides into the white space.
How can I can I keep the elements separate, but have the same styling as the full-width browser?
My Code: https://w.trhou.se/7i4cps3aok
2 Answers
Shaun Earley
20,412 PointsYes, you are correct. However, if you are trying to resize you screen down to a mobile view you will need to use a media query to accomplish this. You are going to get so small that there is no room for the content with the margins, so the last element, which is your #mainnav ul is going to break to the next line. I edited your code below, it's not complete but you can see what I mean. Notice I move a few of your floats around also.
Shaun Earley
20,412 PointsYour layout is breaking because your margins are to big when the screen become smaller. You need to create a media query, so you can change your css when the screen becomes larger and smaller. I recommend you take the CSS layout course before you worry about how your layout is changing on a smaller screen.
Shaun
Lindsay Barrett
Python Web Development Techdegree Student 7,357 PointsThanks @shaunearley , but since my margins are percentages wouldn't they adjust to the screen size?
Lindsay Barrett
Python Web Development Techdegree Student 7,357 PointsLindsay Barrett
Python Web Development Techdegree Student 7,357 PointsI see! I will test out the code.