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
Zahscha Gonzalez
27,775 PointsElements in header will not display aligned in the media query min-width:660px
Hi,
I don't know what I am doing wrong but my header elements will not align. I used the Chrome developer tools to see what was the problem, and it seems like the widths are overlapping because they are both the #logo and the nav both have a width of 45%. If I reduce either to 35% it works on thas specific query, but once the page gets rezised they start stack up. This is my css code
```@media screen and (min-width:660px){
/************************** HEADER **************************/
nav{ background:none; float: right; font-size: 1.125em; margin:5%; text-align:right; width:45%; }
#logo{ float:left; margin:5%; text-align:left; width:45%; } h1{ font-size:2.5em; } h2{ font-size:0.825em; margin-bottom:20px; } header{ border-bottom: 5px solid #599a68; margin-bottom:60px; }
}
check out the link right [here](http://web-094sf3qili.treehouse-app.com/index.html)
2 Answers
Travis Joyner
14,553 PointsSetting the margin to 5% on both elements is placing 5% on BOTH sides of the element. So 45% + 45% + all the margin space is over 100%. Pretty sure this is the issue. Try just setting the margin-right or margin-left to 5%.
Zahscha Gonzalez
27,775 PointsThanks that fixed it!