CODEWITHSUNDEEP
htmlcss
Steve
Steve

Reputation: 1765

extra margin between DIVs

On this website, there is a gap between #container_head & #container_page:

Can you see what is causing this gap? I can't. I tried creating a jsfiddle, but I thought showing you the live site would be quicker.

enter image description here

Upvotes: 0

Views: 63

Answers (5)

Mohith
Mohith

Reputation: 115

There is a margin-bottom for the header section, in the .site-header class. Remove it and it works fine

Upvotes: 2

Aalok Mishra
Aalok Mishra

Reputation: 196

The padding is coming from an internal div inside header with id=masthead. Please refer to the screen grab for details.enter image description here

once you remove it, your issue will be resolved.

Upvotes: 1

Anubhav pun
Anubhav pun

Reputation: 1323

In your style there is margin-bottom issue as fix it

.home.blog .site-header, .home.page:not(.page-template-template-homepage) .site-header, .home.post-type-archive-product .site-header, .no-wc-breadcrumb .site-header{
 margin:0px !Important;
}

Upvotes: 1

thepio
thepio

Reputation: 6263

The header has a bottom margin set in here:

.home.blog .site-header, .home.page:not(.page-template-template-homepage) .site-header, .home.post-type-archive-product .site-header, .no-wc-breadcrumb .site-header {
  margin-bottom: 4.236em;
}

Fix it by setting the following css (note below):

.home.page:not(.page-template-template-homepage) .site-header {
  margin-bottom: 0;
}

I would be careful if you would set the margin-bottom to the whole declaration in the first place. Use the second way I provided. Otherwise it might have unwanted effects in other pages of your site.

Upvotes: 1

Jakub Matczak
Jakub Matczak

Reputation: 15656

Inside #container_head where header#masthead that has margin-bottom: 4.236em.

It's applied in CSS rule:

.home.blog .site-header, .home.page:not(.page-template-template-homepage) .site-header, .home.post-type-archive-product .site-header, .no-wc-breadcrumb .site-header {}

Upvotes: 1

Related Questions