Guys, I can not understand where the indent between the container with the red fill and the container is from above. The console does not show anything extra.

enter image description here

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>

  • If the problem is solved, you must accept the appropriate answer by clicking on the check mark to the left of it. - Qwertiy ♦
  • Hello. If you don’t understand these basic things, here’s a good tip: connect the normalize.css to the CSS code first, which is designed to cross-browser and zero out the various indents. I also recommend that you study the style of writing on BEM, it will give your code a single style and structure, you yourself will be easier to understand your code. It is also often worth refusing to write styles on tags, write to classes. - Alexander Kazakov,

4 answers 4

Give the class .image display: -webkit-box;

  • Thanks, it helped. - Dastan Zhamekeshev
  • one
    @Lorkend, at least just flex. Why dig up this old stuff? - Qwertiy ♦

Maybe this will help. It is necessary to insert in the beginning of the css file.

 *{ margin: 0; padding: 0; }

    Register a margin-top: -15px; style string for .container h1 margin-top: -15px;

      Most likely it is the margin collapse. Try

       header, .main, .container { overflow: hidden; }

      Only it is better not to write straight, but to set a class for the header.

      • one
        You practice bad practice. I, for example, even for body do not prescribe overflow-x: hidden; , although it is recommended by many, but this is because in a good layout, there should not be a horizontal scroll, even without this property. But there is one more big minus of such a record: if in the layout, something will be wrong (the element climbs a bit beyond the parent container), then with overflow: hidden; you will not see this, as it will be cut off automatically, therefore you will not be able to fix it. And if there is no overflow: hidden; , then you just see the scroll, you realize that something is wrong and fix it. - Alexander Kazakov,
      • I hope I clearly explained: for the most part, overflow: hidden; not hung in a good layout overflow: hidden; on the body, sections and the like. You are quite rude, considering what global classes you hung it on. This is definitely a bad practice, I give you a minus. - Alexander Kazakov,
      • @AlexandrKazakov, with normal layout, nothing for overflow: hidden doesn’t crawl, except for the fact that it should crawl according to the idea. - Qwertiy ♦