Space between the divs?

Question

I would like to ask about space between divs in my html. There is always space between the .container and .main. Can anyone explain why? For example: I would like to move h1 text "MOVE" to top of the page (with no space).

Thank you very much,

Here is the codes: HTML

html, body {
            margin: 0;
          }
    
          h1, h2, a {
            font-family: 'Oswald', sans-serif;
            text-transform: uppercase;
          }
    
          p {
            font-family: Helvetica, Arial, sans-serif; 
          }
    
          .container {
            max-width: 940px;
            margin: 0 auto;
          }
         h1 {margin: 0;}
          /* Main */
          .main {
            text-align: center;
            background: url(https://s3.amazonaws.com/codecademy-content/projects/move/bg.jpg) no-repeat center center;
            background-size: cover;
            height: 600px;
          }
    
          .main .container {
            position: relative;
            top: 100px;
          }
    
          .main h1 {
            color: #fff;
            margin: 0;
            font-size: 150px;
          }
    
          .main p {
            color: #fff;
            margin: 0 0 20px 0;
            font-size: 18px;
          }
    
          .main .btn {
            background-color: #1c1c1c;
            color: #fff;
            font-size: 18px;
            padding: 8px 30px;
            text-decoration: none;
            display: inline-block;
          }
    
          /* Supporting */
          .supporting {
            background-color: #1c1c1c;
            text-align: center;
            padding: 50px 0 80px;
          }
    
          .supporting .col {
            float: left;
            width: 28%;
            padding: 10px;
          }
    
          .supporting h2 {
            color: #ffa800;
            font-size: 20px;
            margin-bottom: 10px;
          }
    
          .clearfix {
            clear: both;
          }
    
          .supporting p {
            color: #efefef;
            margin-bottom: 20px;
            line-height: 20px;
            font-size: 12px;
          }
    
          .supporting .btn {
            background-color: #eee;
            color: #1c1c1c;
            font-size: 18px;
            padding: 8px 30px;
            text-decoration: none;
            display: inline-block;
          }
    
          /* Feature */
          .feature {
            background: url(https://s3.amazonaws.com/codecademy-content/projects/move/feature.jpg) no-repeat center center;
            background-size: cover;
            height: 600px;
            text-align: center;
          }
    
          .feature .container {
            position: relative;
            top: 200px;
          }
    
          .feature h2 {
            color: #fff;
            font-size: 40px;
            margin:0;
            padding:50px 0 0;
    
          }
    
          /* Footer */
          .footer {
            background: url(https://s3.amazonaws.com/codecademy-    content/projects/move/footer.jpg) no-repeat center center;
            background-size: cover;
            height: 600px;
            text-align: center;
          }
    
          .footer .container {
            position: relative;
            top: 200px;
          }
    
          .footer h2 {
            color: #fff;
            font-size: 40px;
            margin: 0 0 20px 0;
            padding:50px 0 0;
          }
    
          .footer p {
            color: #fff;
            margin: 0 0 20px 0;
            font-size: 18px;
          }
    
          .footer .btn {
            background-color: #1c1c1c;
            color: #fff;
            font-size: 18px;
            padding: 8px 30px;
            text-decoration: none;
            display: inline-block;
          }
    
          a.btn:hover {
            background:#ffa800;
            color:#000;
          }
    
          @media (min-width:600px) {
            .main h1 {
              font-size: 200px;
            }
    
            .supporting .col {
              width: 30%;
            }
    
            .supporting h2 {
              font-size: 40px;
            }
    
            .supporting p {
              font-size: 14px;
            }
    
            .feature h2 {
              font-size: 60px;
            }
          }

<div class="container">
            <h1>Move</h1>
            <p>Form healthy habits to take your fitness to the next level.</p>
            <a class="btn" href="#">Start Now</a>
          </div>
        </div>
    
        <div class="supporting">
          <div class="container">
            <div class="col">
              <h2>Move</h2>
              <p>Become more active by tracking your runs, rides, and walks.</p>
            </div>
            <div class="col">
              <h2>Sync</h2>
              <p>Access your activity on your phone, tablet, or computer.</p>
            </div>
            <div class="col">
              <h2>Compete</h2>
              <p>Set personal challenges and see how you rank against your friends.</p>
            </div>
            <div class="clearfix"></div>
          </div>
        </div>
    
        <div class="feature">
          <div class="container">
            <h2>Move. Rest. Recover. Move.</h2>
          </div>
        </div>
    
        <div class="supporting">
          <div class="container">
            <h2>Go Premium</h2>
            <p>Receive recommendations based on your activity to level up.</p>
            <a class="btn" href="#">Learn More</a>
          </div>
        </div>
    
        <div class="footer">
          <div class="container">
            <h2>Stop scrolling. Start moving</h2>
            <a class="btn" href="#">Start Now</a>
          </div>
        </div>

When you load your page in chrome or any browser, open its developer tools, select your element under `Elements` tab. On the right you should be able to examine all the CSS rules being applied to that particular element, this will help you in locating the cause of that gap, which you can rectify by adding needed CSS rules on your stylesheet. — Prateek Gupta, Sep 13 '16 at 08:32

score 0 · Answer 1 · answered Sep 13 '16 at 08:29

0

Your H1 tag probably has some top margin on it, making your .container div get pushed further away from your .main div.

You can illeviate this by simply removing the top margin from the H1 tag.

h1 {
    margin-top:0;
}

answered Sep 13 '16 at 08:29

Lee

4,187
6
25
71

Thank you very much, I will try that setting! – J.Dang Sep 13 '16 at 08:43

score 0 · Answer 2 · edited May 23 '17 at 12:01

0

It will probably be the browser defaults kicking in, you should look into using a HTML reset stylesheet. Have a read of Which HTML5 reset CSS do you use and why? for some examples.

edited May 23 '17 at 12:01

Community

1
1

answered Sep 13 '16 at 08:29

ca8msm

1,170
3
15
37

I think this is the solution. Thank for your help! – J.Dang Sep 13 '16 at 08:44

Space between the divs?

2 Answers2