0

At this page, I have the following:

body {background-image: url(images/bg-page.jpg); background-size: cover; repeat: no-repeat;}
#selector {list-style: none; max-width: 1322px; margin: 0 auto; padding-left: 0; -webkit-padding-start: 0; margin-bottom: 0;}
#selector li {display: inline-block; width: 11.625%; margin-right: 0.75%; margin-top: 1%; background-color: #012F60; height: 70px; display: inline-table; vertical-align: top}
#selector li:last-child {margin-right: 0%}
#selector li#job.active {background-color: #93CB32;}
#selector li#help.active {background-color: green;}
#selector li#ndis.active {background-color: blue;}
#selector li#training.active {background-color: purple;}
#selector li#injured.active {background-color: orange;}
#selector li#refer.active {background-color: yellow;}
#selector li#psych.active {background-color: aqua;}
#selector li#employer.active {background-color: black;}
#selector li a {color: white; text-align: center; vertical-align: middle; display: table-cell; text-decoration: none;}
#selection {max-width: 1322px; margin: 0 auto; margin-top: 0;}
#div-job, #div-help, #div-ndis, #div-training, #div-injured, #div-refer, #div-psych, #div-employer {text-align: center; color: white;}
#div-job {background-color: #93CB32;}
#div-help {background-color: green;}
#div-ndis {background-color: blue;}
#div-training {background-color: purple;}
#div-injured {background-color: orange;}
#div-refer {background-color: yellow;}
#div-psych {background-color: aqua;}
#div-employer {background-color: black;}
<div id="page">
 
    <ul id="selector">
     <li id="job" class="active"><a href="#">I want to find a job</a></li>
        <li id="help"><a href="#">I need help at work</a></li>
        <li id="ndis"><a href="#">NDIS</a></li>
        <li id="training"><a href="#">I need training</a></li>
        <li id="injured"><a href="#">I've been injured at work</a></li>
        <li id="refer"><a href="#">I want to refer</a></li>
        <li id="psych"><a href="#">Psych service</a></li>
        <li id="employer"><a href="#">I'm an employer</a></li>
    </ul>
    <div id="selection">
        <div id="div-job">
            <h2>Looking for a job?</h2>
            <h3>Let us know what suits you, make your selection below</h3>
            <select>DES for employers (recruitment)</select>
        </div>
    </div>

</div>

Why is there a gap between the horizontal list and the div below it?

There is no padding or margin that I can see.

#selector has margin-bottom: 0, and #selection and margin-top: 0.

enter image description here

Steve
  • 2,066
  • 13
  • 60
  • 115

2 Answers2

1

It's a margin around h2 elements inside the #div-help.

zerkms
  • 249,484
  • 69
  • 436
  • 539
1

Its the margin from the H2 tag that is causing this.

add a margin-top:0; to the h2 tag and it will fix the issue.

enter image description here enter image description here

Lucas Desouza
  • 156
  • 8
  • 1
    tu use the correct words it not the margin of h2 but a margin collapsing issue .. the margin of h2 is collpased with the margin of it's container and thus applied to the container – Temani Afif Feb 11 '18 at 08:01