How to get rid of white space

[carter90]

I have been looking around to try and figure out why there is a big gap at the top of this slider and I really don't know how to get rid of it.

 

 

<h1><span style="color: #3b853f;">WELCOME TO INSURED CARS</span></h1>

One low cost, monthly payment with insurance included. Protecting the public from high premiums......

<div class="space" style="height: 5px;"></div>

<h4><img class="alignnone size-large wp-image-1352" alt="revolution-tick" src="http://insuredcarsonline.com/wp-content/uploads/2013/01/revolution-tick1.jpg" width="19" height="20" /><span style="color: #000000;"> INSURANCE INCLUDED</span></h4>

<h4><img class="alignnone size-large wp-image-1352" alt="revolution-tick" src="http://.com/wp-content/uploads/2013/01/revolution-tick1.jpg" width="19" height="20" /><span style="color: #000000;"> LOW INITIAL PAYMENT</span></h4>

<h4><img class="alignnone size-large wp-image-1352" alt="revolution-tick" src="http://.com/wp-content/uploads/2013/01/revolution-tick1.jpg" width="19" height="20" /><span style="color: #000000;"> ROAD TAX AND SERVICING INCLUDED</span></h4>

<h4><img class="alignnone size-large wp-image-1352" alt="revolution-tick" src="http://.com/wp-content/uploads/2013/01/revolution-tick1.jpg" width="19" height="20" /><span style="color: #000000;"> CURFEW FREE SAFE DRIVING AID</span></h4>

<h4><img class="alignnone size-large wp-image-1352" alt="revolution-tick" src="http://.com/wp-content/uploads/2013/01/revolution-tick1.jpg" width="19" height="20" /><span style="color: #000000;"> COMPLETE DATA CONFIDENTIALITY</span></h4>

<h4><img class="alignnone size-large wp-image-1352" alt="revolution-tick" src="http://.com/wp-content/uploads/2013/01/revolution-tick1.jpg" width="19" height="20" /><span style="color: #000000;"> GUARANTEED FIXED PRICE INSURANCE</span></h4>

<h4><img class="alignnone size-large wp-image-1352" alt="revolution-tick" src="http://.com/wp-content/uploads/2013/01/revolution-tick1.jpg" width="19" height="20" /><span style="color: #000000;"> ACCIDENT PROOF POLICY</span></h4>

 

[computermax2328]

To find a solution we would have to see the CSS. Immediately, just by looking at the thumbnail it obviously seems to be a margin or padding problem. You can also set the div that all of these headers are in to position: relative. That could help.

[carter90]

Thanks for the advice. I have changed h1 and h4 to position:relative; and margin-top:0px; which didn't change anything unfortunately. I have pasted below the CSS:

 

 

 

body, p, li, address, dd, blockquote {  } 

h1, h2, h3, h4, h5, h6, p, dl { margin:0.8em 0 0.8em; }          

a, a:hover { text-decoration:none; outline: none !important; }

h1, h2, h3, h4, h5, h6 { font-weight: 800; }

h1, h1 a { font-size:22px; line-height: 22px; }

h2, h2 a { font-size:20px; line-height: 20px; }

h3, h3 a { font-size:17px; line-height: 17px; }

h4, h4 a { font-size:16px; line-height: 16px; }

h5, h5 a { font-size:15px; line-height: 15px; }

h6, h6 a { font-size:14px; line-height: 14px; }

.content ul { margin-left:20px; list-style:square }

.content ol { margin-left:40px; }

i, em { font-style:italic; }

strong { font-weight:bold; }

.content blockquote { background:url('./core/assets/images/cite.png') no-repeat 45px 25px; padding:35px; }

.content blockquote p { padding-left: 45px; }        

.border-line { height:1px; background:#CFCFCF; width:100%; clear:both; margin:1.2em 0; }

dt { font-weight:bold; }

mark { background: transparent !important; }

 

a { color: #9A6614; }

a:hover { color: #815207; }

.sidebar a { color: #575858; }

.sidebar a:hover { color: #9A6614; }

a:hover .title-highlight { color: #6C6D03; }

 

.line { border-top:1px solid #CFCFCF }

.space { height:30px }

body .last, body .widget-last { margin-right:0; padding-right:0 !important; border-right:0; }

body .last-row { margin-bottom:0; }        

.for-mobile { display:none !important; }  

.not-logged-in .not__logged_in { display:none !important; }

 

p, li, address, dd, blockquote, td, th, a,

body, h1, h2, h3, h4, h5, h6, p, dl, ul, ol,

.paragraph-links a, #respond input, #respond textarea, #respond p label, #search_mini {

    color: #666767;

    font-family: 'Play', 'Verdana', 'Arial', sans-serif;

    font-size: 12px;

    font-weight: normal;

    line-height: 20px;

}

code, pre { background-color: #E8EBEC; border: 1px dotted #CFCFCF; color: #333333; font: 13px/18px Consolas,"Courier New",Courier,monospace; padding: 0 5px; }

pre { margin-bottom: 10px; margin-top: 10px; }

 

.margin-top { margin-top: 10px; }

.margin-bottom { margin-bottom: 20px; }

 

/* ===== SIDEBAR LAYOUT ===== */

.sidebar-left .sidebar, .sidebar-right .content { float: left; }

.sidebar-right .sidebar, .sidebar-left .content { float: right; }

 

/* ===== HEADINGS ===== */

h1, h2, h3, h4, h5, h6,

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {

font-size: 12px;

}

h1 span.highlight, h2 span.highlight, h3 span.highlight, h4 span.highlight, h5 span.highlight, h6 span.highlight { color: #c27d05; background-color: transparent !important; }

 

#primary .content .hentry > h1:first-child,

#primary .content .hentry > h2:first-child,

#primary .content .hentry > h3:first-child,

#primary .content .hentry > h4:first-child,

#primary .content .hentry > h5:first-child,

#primary .content .hentry > h6:first-child,

#primary .content .hentry > p:first-child { /*margin-top: 0px;*/ }

 

/* ===== MAIN LAYOUT ===== */

body {

    position: relative;

}

body.responsive {

overflow-x: hidden;

}

.boxed #wrapper {

    padding: 0px 20px;

    background: #fff;

    position:relative;

}

.boxed #header, .boxed #topbar, .boxed #footer, .boxed #copyright {

margin-right: -20px;

;

}

.stretched #wrapper.container {

    width: 100%;

}

.boxed .wrapper-border { position: absolute; width: 100%; height: 100%; border: 8px solid rgba(0, 0, 0, 0.04); left: -8px; top: -8px; border-radius:8px; -moz-border-radius:8px; -webkit-border-radius:8px; z-index:-1; }

 

/* ===== TOPBAR ===== */

#topbar {

    padding: 10px 0;

    text-transform: uppercase;

    padding-bottom: 0

}     

#topbar .row { margin-bottom: 4px }

 

#topbar-left { float: left; }

#topbar-right { float: right; }

 

#topbar-left div.widget, 

#topbar-right div.widget { display: inline-block; vertical-align: top; margin-right: 15px }

 

#topbar .widget.widget_nav_menu { margin: 0 }

#topbar .widget_nav_menu ul { margin: 0 }

#topbar .widget_nav_menu ul > li:first-child { margin-left: 0 }

#topbar .widget_nav_menu ul > li { float: left; border: none !important; margin-left: 10px }

#topbar .widget_nav_menu ul > li a { border: none !important; padding: 0; background: none }

 

.border { border: 1px solid #e0dfdf; height: 1px; padding-bottom: 2px; border-width: 0 0 1px 0 }

.borderstrong { border-width: 0 0 4px 0 !important; }

.borderpadding { margin-bottom: 3px }

 

/* ===== HEADER ===== */

#header {

    position: relative;

    /*margin-bottom:21px;*/

    /*height: 105px;*/

}    

 

/* === LOGO */

#logo-headersidebar-container { position:relative; min-height: 125px }  

#logo {

    text-transform: uppercase;

    padding:10px 0 5px 0;

    width: 257px;

    margin-left: 18px;

    margin-top: 5px;

    float: left;

}

.align-left #logo{ text-align:left; }

.align-right #logo{ text-align:right; }

 

#logo #textual { display: inline-block; margin-top: 20px; margin-bottom: 12px; line-height: 1em; }

 

#header #tagline { margin: 0 0 0 0; text-transform: none; font-size: 15px;  }

#header #tagline.multiline { margin-top: 10px }

 

#header #logo #tagline span { color: #E5F99A }    

#header #logo #textual, #header #logo #textual span { font-size: 40px; }

 

 

/* === */

#header-sidebar { float: right; max-width: 342px; }

#header-sidebar.double { max-width:684px; }

#header-sidebar .widget, #header-sidebar .widget-last {

    display:inline-block; 

    vertical-align: top;

    width: 170px;

    border: 1px solid #E0DFDF;

    height: 48px;

    margin-top: -1px !important;

    ;

}

 

#header-sidebar .widget.text-image { padding-top: 15px; margin-top: -1px !important; padding-bottom: 6px }

#header-sidebar .widget.text-image, 

#header-sidebar .widget.text-image h3, 

#header-sidebar .widget.text-image p, 

#header-sidebar .widget.text-image a,

#header-sidebar .widget_text.widget { 

font-family:'Oswald', sans-serif; 

font-size:14px; 

color:#8d8d8d; 

font-weight: normal;

margin: 0;

}

#header-sidebar .widget.text-image h3, #header-sidebar .widget.text-image p {

float: left;

display: block;

}

#header-sidebar .widget.text-image h3 { margin-top: 6px; color:#373736; }

#header-sidebar .widget.text-image .text-image { 

float:left; 

padding-right:5px; 

padding-left:10px;

}

 

#header-sidebar .widget_text.widget { width: 341px; height: 40px; padding-top: 24px; text-align: center; font-size: 18px; padding-bottom:5px; }

#header-sidebar .widget_text.widget h3 { display: inline-block; margin-right: 5px; }

#header-sidebar .widget_text div { margin: 0px -2px 0px -1px; float: none !important; display: inline-block; line-height: 23px }

 

#header-sidebar a.socials-square, 

#header-sidebar a.socials-square-small, 

#header-sidebar a.socials-default, 

#header-sidebar a.socials-default-small, 

#header-sidebar a.fade-socials, 

#header-sidebar a.fade-socials-small { vertical-align:top; }

[computermax2328]

What are all of these h4s and the one h1 wrapped in? It looks like they have an element around them. That needs to be relative or have no margin.

Edited May 1, 2013 by computermax2328