Неизвестный отступ между контейнерами

html, body, h1 { 
    font-family: 'Gamja Flower', cursive; 
    padding: 0; 
    margin: 0; 
} 
header { 
    height: 110px; 
    color: #eeeff1; 
} 
nav, .menu { 
    display: flex; 
    flex-direction: row; 
    justify-content: flex-end; 
    font-size: 22px; 
} 
.logo h1 { 
    color: #353840; 
} 
.logo p { 
    color: #c3563d; 
} 
.logo { 
    line-height: 0.3; 
    margin-top: 40px; 
    margin-right: 200px; 
} 
.menu li { 
    display: block; 
    margin-right: 30px; 
    margin-top: 30px; 
    margin-left: 40px; 
    font-weight: bold; 
} 
.menu li:nth-child(3) { 
    margin-top: 21px; 
    color: #fff; 
    background-color: #dd4b2b; 
    border-radius: 10px; 
    padding: 8px 20px; 
    text-decoration: none; 
    text-align: center; 
} 
.menu li a { 
    text-decoration: none; 
    color: #31353e; 
} 
.main { 
    width: 100%; 
} 
.image { 
    position: relative; 
} 
.image img { 
    display: block; 
    width: 100%; 
    height: 1000px; 
} 
.image .captions { 
    left: 5%; 
    right: 5%; 
    bottom: 55%; 
    position: absolute; 
    text-align: center; 
    line-height: 0.5; 
} 
.image .captions .line-1 { 
    color: #fff; 
    font-size: 30px; 
} 
.line-1 h1 { 
    letter-spacing: 2px; 
} 
.image .captions .line-2 { 
    color: #fff; 
    font-weight: bold; 
    font-size: 26px; 
} 
.main-2 .icons {  
    color: white;  
    left: 15%;  
    right: 5%;  
    bottom: 23.5%;  
    position: absolute;  
    }  
    .icons img {  
    width: 110px;  
    height: 110px;  
    }  
    .main-2 .icons-2 {  
    color: white;  
    left: 50%;  
    right: 5%;  
    bottom: 21.5%;  
    position: absolute;  
    }  
    .icons-2 img {  
    width: 110px;  
    height: 110px;  
    }  
    .main-2 .icons-3 {  
    color: white;  
    left: 80%;  
    right: 5%;  
    bottom: 19.5%;  
    position: absolute;  
    }  
    .icons-3 img {  
    width: 110px;  
    height: 110px;  
    } 
.button { 
    position: absolute; 
    bottom: 9%; 
    left: 43%; 
    display: block; 
    text-decoration: none; 
    font-size: 22px; 
    text-align: center; 
    color: #61362c; 
    background-color: #fff; 
    border-radius: 20px; 
    padding: 15px; 
    width: 145px; 
} 
.container { 
    padding: 0px; 
    margin: 0; 
    height: 900px; 
    width: 100%; 
    background-color: red; 
    text-align: center; 
} 
.container h1 { 
    padding-top: 80px; 
    font-size: 52px; 
} 
div.images { 
    margin-top: 87px; 
    display: flex; 
    flex-direction: row; 
    justify-content: space-around; 
} 
.first h2 { 
    text-align: center; 
    padding-top: 20px; 
} 
.first p { 
    text-align: center; 
    font-size: 18px; 
} 
.second h2 { 
    text-align: center; 
    padding-top: 20px; 
} 
.second p { 
    text-align: center; 
    font-size: 18px; 
} 
.third h2 { 
    text-align: center; 
    padding-top: 20px; 
} 
.third p { 
    text-align: center; 
    font-size: 18px; 
} 
.button2 { 
    display: block; 
    text-decoration: none; 
    font-size: 22px; 
    text-align: center; 
    color: #fff; 
    background-color: #dd4b2b; 
    border-radius: 20px; 
    padding: 15px; 
    width: 195px; 
    margin: 40px auto; 
} 
.container-2 { 
  position: relative; 
} 
.container-2 img { 
  display: block; 
  width: 100%; 
  height: 350px; 
} 
.container-2 .newsletter { 
    left: 5%; 
    right: 5%; 
    bottom: 20%; 
    position: absolute; 
    text-align: center; 
} 
.container-2 .newsletter h1 { 
  color: #fff; 
} 
.container-2 .newsletter p { 
  font-size: 22px; 
  color: #fff; 
  margin-bottom: 40px; 
} 
.button3 { 
    display: block; 
    text-decoration: none; 
    font-size: 22px; 
    text-align: center; 
    color: #55281d; 
    background-color: #fff; 
    border-radius: 20px; 
    padding: 15px; 
    width: 195px; 
    margin: 0 auto; 
} 
.container-3 { 
    background-color: #fff; 
    height: 400px; 
} 
.captions-2 { 
    display: inline-block; 
    margin-top: 120px; 
    margin-left: 200px; 
} 
.button4 { 
    display: inline-block; 
    text-decoration: none; 
    font-size: 22px; 
    text-align: center; 
    color: #fff; 
    background-color: #dd4b2b; 
    border-radius: 35px; 
    padding: 15px; 
    width: 195px; 
    margin-top: 40px; 
} 
.food { 
    display: inline; 
} 
img.pancake { 
    width: 300px; 
    height: 300px; 
    float: right; 
    margin-top: 100px; 
    margin-right: 200px; 
} 
footer { 
    background-color: #d75d0e; 
    height: 406px; 
    margin-top: 80px; 
} 
.flex li { 
    list-style-type: none; 
    line-height: 2; 
    font-size: 18px; 
} 
.column-1 { 
    margin-top: 80px; 
} 
.column-2 { 
    margin-top: 80px; 
} 
.column-3 { 
    margin-top: 80px; 
} 
.flex { 
    display: flex; 
    justify-content: space-around; 
} 
.flex a { 
    color: #fff; 
    text-decoration: none; 
} 
.last-image { 
    position: relative; 
} 
.last-image img { 
    display: block; 
  width: 100%; 
  height: 310px; 
} 
.last-image .last-caption { 
    left: 5%; 
    right: 5%; 
    bottom: 30%; 
    position: absolute; 
    text-align: center; 
    color: #fff; 
} 
.last-caption h1 { 
    font-weight: normal; 
}

<!DOCTYPE html> 
    <html> 
        <head> 
            <title>Вёрстка</title> 
            <meta charset="utf-8"> 
            <meta name="viewport" content="width=device-width, initial-scale=1"> 
            <link href="https://fonts.googleapis.com/css?family=Gamja+Flower" rel="stylesheet"> 
            <link href="style.css" rel="stylesheet"> 
        </head> 
        <body> 
            <header> 
                <nav> 
                    <div class="logo"> 
                            <h1>Panakeia</h1> 
                            <p>Free PSD Template</p> 
                    </div> 
                    <ul class="menu"> 
                       <li><a href="#">Fusce at</a></li>  
                       <li><a href="#">Facilisis</a></li>  
                       <li><a href="#">Ante donec</a></li>  
                       <li><a href="#">Blandit rhoncus</a></li>  
                       <li><a href="#">Placerat</a></li>  
                    </ul> 
            </nav> 
            </header> 
            <div class="main"> 
                <div class="image"> 
                        <img src="Layer1.png"/> 
                <div class="captions"> 
                    <div class="line-1"><h1>Integer at tortor ut magna</h1></div> 
                    <div class="line-2"><p>finibus lobortis sed quis tellus.</p></div> 
                </div> 
                <div class="main-2">  
                        <div class="icons">  
                            <img src="Layer 2.png">  
                             <h2>Tincidont</h2>  
                             <p>Phasellus arcu justo, ullamcorper non diam sit amet,<br>  
                        luctus condimentum metus. Nullam tempus egestas<br> efficitur. Sed quam dolor.</p>  
                        </div>  
                        <div class="icons-2">  
                            <img src="Layer 3.png">  
                            <h2>Duis Bibendum</h2>  
                            <p>Ut arcu arcu, faucibus eu risus blandit, pulvinar<br>  
                                viverra justo. Phasellus arcu justo, ullamcorper<br> non  
                                diam sit amet, luctus condimentum metus. In<br> hac habitasse platea dictumst. </p> 
                        </div>  
                        <div class="icons-3">  
                            <img src="Layer 4.png">  
                            <h2>Donec Ligula</h2>  
                            <p>Nullam tempus egestas efficitur. Sed quam dolor,<br> vulputate sed mattis et, sodales quis orci. Ut arcu<br> arcu,faucibus eu risus blandit,.  
                            </div> </p> 
                </div> 
                <a class="button" href="#">Read more</a> 
            </div> 
        </div> 
        <div class="container"> 
            <h1>Our news</h1> 
            <div class="images"> 
                <div class="first"> 
                        <img src="Layer 5.png"> 
                        <h2>Lorem ipsum</h2> 
                        <p>Est a elit scelerisque vestibulum. Donec est sem,<br> lobortis sit amet imperdiet vel, pretium lobortis<br> erat. Nulla vitae hendrerit odio.</p> 
                        <a class="button2" href="#">Read more</a> 
                </div> 
                <div class="second"> 
                        <img src="Layer 6.png"> 
                        <h2>Lorem ipsum</h2> 
                        <p>Est a elit scelerisque vestibulum. Donec est sem,<br> lobortis sit amet imperdiet vel, pretium lobortis<br> erat. Nulla vitae hendrerit odio.</p> 
                        <a class="button2" href="#">Read more</a> 
                </div> 
                <div class="third"> 
                        <img src="Layer 7.png"> 
                        <h2>Lorem ipsum</h2> 
                        <p>Est a elit scelerisque vestibulum. Donec est sem,<br> lobortis sit amet imperdiet vel, pretium lobortis<br> erat. Nulla vitae hendrerit odio.</p> 
                        <a class="button2" href="#">Read more</a> 
                </div> 
                </div> 
                </div> 
                <div class="container-2"> 
                    <img src="Layer 8.png"> 
                    <div class="newsletter"> 
                        <div class="line-1"><h1>Newsletter</h1></div> 
                        <div class="line-2"><p>Ut arcu arcu, faucibus eu risus blandit, pulvinar viverra justo.<br> Phasellus arcu justo, 
                        ullamcorper non diam sit amet, luctus condimentum metus</p></div> 
                        <a class="button3" href="#">Sign up</a> 
                </div> 
                </div> 
                <div class="container-3"> 
                    <div class="captions-2"> 
                            <h1>Ipsum dolor sit amet</h1> 
                            <p>Nam accumsan nunc sit amet elementum sollicitudin. Integer vel lacus eget tortor<br> lobortis tincidunt sed eu dolor. Phasellus cursus augue ac pulvinar cursus. 
                                <br><br> 
                                Quisque ut erat ornare, feugiat turpis a, fringilla felis. Nulla molestie lorem et orci<br> sagittis, et accumsan ex porta.</p> 
                            <a class="button4" href="#">Sign up</a> 
                    </div> 
                    <div class="food"> 
                            <img class="pancake" src="Layer 9.png"> 
                    </div> 
                </div> 
                <footer> 
                <div class="flex"> 
                <div class="column-1"> 
                    <ul> 
                        <li><a href="#">Ad litora torquent</a></li> 
                        <li><a href="#">Per conubia</a></li> 
                        <li><a href="#">Nostra</a></li> 
                        <li><a href="#">Per inceptos</a></li> 
                        <li><a href="#">Himenaeos</a></li> 
                        <li><a href="#">In consectetur</a></li> 
                    </ul> 
                </div> 
                <div class="column-2"> 
                    <ul> 
                        <li><a href="#">Taciti sociosqu</a></li> 
                        <li><a href="#">Ad litora torquent</a></li> 
                        <li><a href="#">Per conubia</a></li> 
                        <li><a href="#">Himenaeos</a></li> 
                        <li><a href="#">In consectetur</a></li> 
                        <li><a href="#">Nisi sed blandit</a></li> 
                        <li><a href="#">Tincidunt</a></li> 
                    </ul> 
                </div> 
                <div class="column-3"> 
                    <ul> 
                        <li><a href="#">Nostra</a></li> 
                        <li><a href="#">Per inceptos</a></li> 
                        <li><a href="#">Himenaeos</a></li> 
                        <li><a href="#">In consectetur</a></li> 
                        <li><a href="#">Nisi sed blandit</a></li> 
                        <li><a href="#">Tincidunt</a></li> 
                    </ul> 
                </div> 
                </div> 
                </footer> 
                <div class="last-image"> 
                <img src="Layer 8.png"> 
                <div class="last-caption"> 
                        <h1>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.<br> 
    Try awesome tool for desgners symu.co</h1> 
                </div> 
                </div> 
        </body> 
    </html>