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

HTML How to Make a Website Responsive Web Design and Testing Adjust the Profile Page and Header

Jakub Dydowicz
Jakub Dydowicz
12,825 Points

logo and nav don't fit beside each other

although there is a one sided margin of 5% and a width of 45% for both elements, the logo appears in the top left corner and the nav on the bottom right. when i change one of both widths to 43 % (a total width of 98%) both elements appear in the same line. can someone explain that to me?

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

It almost sounds like there's a margin being imposed by your browser. I see that this project is using normalize.css. Are you positive the normalize.css is being loaded in properly? Have you tried looking at it in another browser? Also, if you could post a snapshot, then we could take a look at your workspace to see if we notice any other oddities.

4 Answers

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Take a look in your main.css under the Navigation section. There you will see multiple margins and paddings that are being scattered around your elements. But the code you have isn't taking those into consideration. But when you change the total width down to 98% then everything goes onto the same line, because everything can now fit when those paddings and margins are added. Hope this helps! :smiley:

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,253 Points

Have you accounted for any default padding on the elements? Once the elements total more than 100% of available space the swcond element will push below the first to make space.

Images are inline elements so as long as there is space to appear on one line of the X axis they will all display on that line, side by side. :-)

Jakub Dydowicz
Jakub Dydowicz
12,825 Points

i think i did everything right and other browsers show the same view. and i think the normalize file is inserted correctly too. maybe this snapshot helps to help... https://w.trhou.se/ffikdcxbj6

Jakub Dydowicz
Jakub Dydowicz
12,825 Points

ok, i removed the padding left/right. now it fits. i thought the problem was the margin. thank you very much