The red block lies in the picture and I can not omit it.

HTML:

<header> <nav class="top_menu"> <div class="container"> <div class="row"> <div class="col-md-3"> <div class="logo"> <img src="img/logo.png" alt="Logo"> </div> </div> <div class="col-md-9"> <div class="main_menu"> <ol> <li class="item_menu active"><a href="#">Home</a></li> <li class="item_menu"><a href="#">About us</a></li> <li class="item_menu"><a href="#">Projects</a></li> <li class="item_menu"><a href="#">Blog</a></li> <li class="item_menu"><a href="#">Events</a></li> <li class="item_menu"><a href="#">Gallery</a></li> <li class="item_menu"><a href="#">Contact us</a></li> </ol> </div> </div> </div> </div> </nav> </header> <section class="main_banner"> <div class="text_banner"> <h1>Welcome to my charity</h1> <span>Lorem Ipsum is simply dummy text of the printing and typesetting</span><br> <button type="button" class="btn">Donate Now</button> </div> </section> <div class="content"> <div class="item_1"></div> <div class="item_2"></div> <div class="item_3"></div> </div>

CSS:

 header { padding: 40px 100px; } .main_menu ol li a{ color:#373838; } .main_menu { border: 1px solid transparent; margin-left:40px; } .main_menu ol{ list-style-type: none; } .main_menu ol li { float:left; display: inline-block; } .main_menu a { padding: 6px 17px; } .main_menu ol li a:hover, .main_menu ol li a:focus { background-color: #9b242d; color:#fff; text-decoration: none; border-radius: 3px; } .item_menu.active a{ background-color: #9b242d; color: #fff; border-radius: 3px; } .main_banner { background-image: url(img/banner.jpg); background-repeat: no-repeat; width: 100%; height: 100%; position: absolute; } .btn { padding: 18px 47px; border-radius: 25px; color:#46a651; border:1px solid transparent; background-color: #fbfbfb; margin-top:80px; font-size: 20px; font-weight: bold; box-shadow: 0 0 10px rgba(0,0,0,0.5); } .text_banner { text-align: center; margin-top:230px; } .text_banner h1 { font-size: 46px; color: #fff; font-weight: normal; font-family: "times new roman"; margin-bottom:24px; text-transform: uppercase; } .text_banner span { font-size: 20px; color: #fff; font-weight: normal; font-family: "times new roman"; } .content { position: absolute; width: 100%; } .item_1 { width: 500px; background-color: red; height:370px; } .item_2 { background-image: url(img/item_1.png); height:370px; background-repeat: no-repeat; display: none; } .item_3 { height:370px; }

enter image description here

    1 answer 1

    The problem was that the object was registered with position: absolute; and he covered the main picture

      .content { width: 100%; } 

     header { padding: 40px 100px; } .main_menu ol li a{ color:#373838; } .main_menu { border: 1px solid transparent; margin-left:40px; } .main_menu ol{ list-style-type: none; } .main_menu ol li { float:left; display: inline-block; } .main_menu a { padding: 6px 17px; } .main_menu ol li a:hover, .main_menu ol li a:focus { background-color: #9b242d; color:#fff; text-decoration: none; border-radius: 3px; } .item_menu.active a{ background-color: #9b242d; color: #fff; border-radius: 3px; } .main_banner { background-image: url(img/banner.jpg); background-repeat: no-repeat; width: 100%; height: 100%; } .btn { padding: 18px 47px; border-radius: 25px; color:#46a651; border:1px solid transparent; background-color: #fbfbfb; margin-top:80px; font-size: 20px; font-weight: bold; box-shadow: 0 0 10px rgba(0,0,0,0.5); } .text_banner { text-align: center; margin-top:230px; } .text_banner h1 { font-size: 46px; color: #fff; font-weight: normal; font-family: "times new roman"; margin-bottom:24px; text-transform: uppercase; } .text_banner span { font-size: 20px; color: #fff; font-weight: normal; font-family: "times new roman"; } .content { width: 100%; } .item_1 { width: 500px; background-color: red; height:370px; } .item_2 { background-image: url(img/item_1.png); height:370px; background-repeat: no-repeat; display: none; } .item_3 { height:370px; } 
     <header> <nav class="top_menu"> <div class="container"> <div class="row"> <div class="col-md-3"> <div class="logo"> <img src="img/logo.png" alt="Logo"> </div> </div> <div class="col-md-9"> <div class="main_menu"> <ol> <li class="item_menu active"><a href="#">Home</a></li> <li class="item_menu"><a href="#">About us</a></li> <li class="item_menu"><a href="#">Projects</a></li> <li class="item_menu"><a href="#">Blog</a></li> <li class="item_menu"><a href="#">Events</a></li> <li class="item_menu"><a href="#">Gallery</a></li> <li class="item_menu"><a href="#">Contact us</a></li> </ol> </div> </div> </div> </div> </nav> </header> <section class="main_banner"> <div class="text_banner"> <h1>Welcome to my charity</h1> <span>Lorem Ipsum is simply dummy text of the printing and typesetting</span><br> <button type="button" class="btn">Donate Now</button> </div> </section> <div class="content"> <div class="item_1"></div> <div class="item_2"></div> <div class="item_3"></div> </div>

    • Can you answer in more detail and add a working example with your editing? - Vadim Ovchinnikov
    • The problem was that the object was registered with position: absolute; and he covered the main picture - L. Vadim
    • Fine, namesake, add that back. - Vadim Ovchinnikov
    • If you remove position: absolute, then the red block becomes under the picture and is not visible, but I need it to go down to the bottom of the picture - Loqiemean
    • How can I see with pictures? - L. Vadim