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

Posted by Simon Woodard
Simon Woodard
6,545 Points

Problem with padding

I have a clients website that is not displaying correctly in chrome.

it seems that the main content is not floating below the navigation as it should, it displays just fine in firefox and IE.

Here is the link, http://www.jcassoc.pioneerwebsites.com.au/about/

Can anyone see what I'm doing wrong here, cause I'm struggling to see it!

Tunde Adegoroye
Tunde Adegoroye
20,597 Points

You have a rule called .container .content and the padding isn't enough it was set to 20px i changed the padding tap to 100px and it pushes the container down 

.container.content {
padding-top: 100px;
width: 100%;
}

also you have used a lot of divs and ::after looking at the design you could maybe reduce the number of them so its easier to maintain in the future

Simon Woodard
Simon Woodard
6,545 Points

Thanks for the comment, however increasing the padding on that element breaks the design of the site!

Tunde Adegoroye
Tunde Adegoroye
20,597 Points

I thought you wanted to push the content down rather than it overlaying underneath the nav you have some absolute styles so using padding allows you to move things up and down im not too sure what your looking for so again i might be wrong

1 Answer

Philippe Parmentier
Philippe Parmentier
9,517 Points
Philippe Parmentier
Philippe Parmentier
9,517 Points

on my chrome, the right menu "optimising the hiring experience" go in a second line.

I could reduce the marging-right to make it only a one row menu. XD

but trying to understand why, I did an overflow:hidden on your nav bar, and Your JCA Consultants disappeared.

after looking at, it appears your dropdown class put a position:absolute on your ul where there is "Your JCA Consultants"

so basically, I think as it is absolute, it makes it out of the html flow then not taken into account in the positioning of the elements further in. Hence that's may be why your text disappear behind it.

as for why it happens in Chrome I do not know.

I m not sure what you want to do with your menu "Your JCA consultants" so I can't think about something. I was just trying to understand what might be the problem. :)

(the menu font is franklin gothic with firefox and It seems Muli on chrome so that's why they don't have the same width) I put margin-right:10px ul.nav li (line 6469?) an idea