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

CSS

When applying .main-nav li{ display: inline-block;} it moves the img in the banner to the left. Ideas?

When applying .main-nav li{ display: inline-block;} it moves the img in the banner to the left. Not really sure why and haven't been able to fix yet.

Hi Chris, Maybe you can give us a snippet or fork of the project / file you are talking about. As you may know with css and a complex markup there are so many moving parts that they may influence each other.

Thanks;

I actually ended up finding the answer. Turns out while I was messing around with the layout I used rem instead of px for the margin-bottom of the .banner in the layout container styles outside of the media queries. Didn't care for it too much. I found two solutions. I used a smaller value for rem or used pixels instead.

1 Answer

Leonardo Motta
Leonardo Motta
11,284 Points

We should see your code to give you a good solution, but notice that inline-block will display as it was inline but it will take margins as it was a block element.