Name is required.
Email address is required.
Invalid email address
Answer is required.
Exceeding max length of 5KB

Of padding, boxes, and margins

I'm working off a template called HTML5up's Read Only. I got the player to work--thanks to some keen eyes on this site, but now I'm trying to get rid of the big fat space beneath the header and my player. I have looked all over the CSS for what is creating the gap. I've used a debugger to find padding codes, none of them changed it.

I also found this code: webkit-box-sizing: border-box;
box-sizing: border-box;,

Is that what I should be focusing on. The page in question is at if that helps.

4 Community Answers


0 rated :

The following is adding a 4em padding to the top of the ".container" class:

#main > section > .container {
padding: 4em 0 2em 0;

This is in "style-xlarge.css".

James Herrieven


0 rated :

That made a difference, but there's still a gap. And certainly if I add to the value, the gap is bigger than before.

Does this mean there's another padding setting in one of the other css files? Or should I be looking for something else?


0 rated :

This isn't a JW Player question at all. The gap below your header image is a product of the page layout produced by whatever package you're using to create the page. You'll have to ask the folks who produced it why it's doing that. This isn't really the place for general HTML/CSS issues.


0 rated :

You're right. Sorry

This question has received the maximum number of answers.