Как сделать чтобы красный блок шел после картинки , а не на ней

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>