图像左侧是文本，右侧是容器

Question

我创建了一个有横幅的页面。被禁止的内容包含左侧页面的标题和右侧的文本框和两个按钮。

页面完全响应，除了横幅，因为我不确定如何使用顶部和左边同时保持响应。

HTML

<div class="banner_container"> 
    <img src="img/banner_1.png">
</div>

<div class="col-md-12">
    <div class="col-md-7"> 
        <div class="banner-title"><strong>WAKE UP IN BALI</strong></div>
    </div>
    <div class="col-md-3 trip_inclusions">
        <div class="inclusions_price">
            <div class="total_nights">
                <div class="number_of_nights">12 </div> NIGHTS
            </div>
            <div class="price_grid_wrapper"> 
                <div class="starting_from">STARTING FROM </div>
                <div class="tour_price">
                    <div class="dollar_price_wrapper">
                        <div class="dollar_logo">$</div>
                        <div class="price_text">1250</div>
                    </div>
                    <div class="price_tax_text">TAXES INCL/PERS</div>
                </div>
            </div>
        </div>
        <div class="inclusions_details">
            <div class="package_includes_title">PACKAGE INCLUDES</div>
            <div class="includes_content">
                <p>+ INTERNATIONAL FLIGHTS</p>
                <p>+ WELCOME & TRANSFERS</p>
                <p>+ HOTEL(12 NIGHTS)</p>
                <p>+ BREAKFASTS</p>
                <p>+ EXCURISIONS</p>
            </div>
        </div>
        <div class="package_buttons">
            <div class="share_package"><a href="#">SHARE PACKAGE +</a></div>
            <div class="all_packages"> <a href="#"> < ALL PACKAGES </a></div>
        </div>
    </div>

</div>

CSS：

.banner_container img{
    width: 100%;
}

.banner-title{
    font-size: 160%;
    color: white;
    text-shadow: 0 1px gray, 1px 0 gray, -1px 0 gray;
    margin: 48px 25px;
    display: block;
    position: absolute;
    top: 0;
}

.trip_inclusions{
    padding: 2px;
    top: 1em;
    position: absolute;
    left: 20em;
}

.inclusions_price {
    background-color: #00467e;
    overflow: auto;
    padding: 3px;
    color: white;
    margin: 0 auto;
    display: inline-block;
    width: 80%;
}

.total_nights {
    width: 24%;
    text-align: center;
    border-right: 1px solid #fff;
    float: left;
    margin-right: 10px;
    font-size: 0.95em;
}

.number_of_nights{
    font-size: 3.8em;
    margin-bottom: -13px;
    margin-top: -10px;
}

.price_grid_wrapper {
    width: 100%;
    margin: 0 auto;
    display: block;
}


.starting_from {
    width: 8%;
    float: left;
    margin-right: 4em;
    font-size: .95em;
    margin-top: 2px;
}


.tour_price {
    float: left;
    width: 40%;
}


.dollar_price_wrapper{
    display: block;
    margin: 0 auto;
}

.dollar_logo{
    float: left;
    font-size:1.5em;
}

.price_text{
    float: left;
    font-size: 3em;
    margin-top: -10px;
}

.price_tax_text{
    text-align: center;
    margin-bottom: 3px;
    font-size: .9em;

}

.inclusions_details{
    background-color: #fff;
    overflow: auto;
    margin-top: -5px;
    width: 80%;

}

.package_includes_title{
    color: #399fff;
    font-size: 20px;
    margin-left: 10px;
    margin-top: 11px;
}

.includes_content{
    color: black;
    font-size: 16px;
    margin-left: 15px;
    line-height: 16px;
    margin-top: 6px;
}

.package_buttons{
    margin:0 auto;
    display: block;
}

.share_package{
    background-color: #399fff;
    padding: 10px;
    color: white;
    font-size:1em;
    float: left;
    width:40%;
    text-align: center;
}

.all_packages{
    background-color: #ffffff;
    padding: 10px;
    width:40%;
    color: #00467e;
    font-size:1em;
    float: left;
    text-align: center;
}

.share_package a{
    color: white;
}

.share_package a:hover{
    color: white;
}

请查看JsFiddle。它根本没有响应，你会看到正确的容器是大的，忽略我会解决它但我想要左边的文本和右边的容器和后面的图像并保持响应。

注意：我可以使用backgroundurl（），但我没有，因为我打算用滑块替换背景图像，所以我需要在一个单独的

谢谢!!!