Background width issue when window reduced, section not taking full width like it should

Question

So frustrated with this issue. I'm not sure what the issue is. I'm trying to get this background on this website to stretch the full width of the background. The issue comes into play when the window size is reduced. Below is the code.

HTML

<section id='slide1' class='slide slide-odd'>
    <div class="postWid">
        <div class='row'>
            <div class='col-lg-7'></div>

            <div class='col-lg-5'>

            </div>
        </div>
    </div>
</section>

CSS

    #slide1, 
    #slide2,
    #slide3,
    #slide4,
    #slide5,
    #slide6,
    #slide7,
    #slide8,
    #slide9,
    #slide10,
    #slide11,
    #slide12,
    #slide13,
    #slide14,
    #slide15,
    #slide16 {
        height: 480px;
    }
.slide-odd {
    background: url('../img/green.png');
    background-color:#408573;
    color:#ffffff;
}
.slide-even {
    background: url('../img/white.png');
    background-color:#f4f0e7;
    color:#000000;
}
.slide {
    padding: 144px 3%;

}
.postWid {
    width: 1240px;
    margin:0 auto;
}

I think it has to do with .postWid I set it to min and max widths but it isn't responding to the min width. So I had to set the width to 1240px;

Answer 1

a) why not specifying your #slides in the .slide class?

b) You can't get relative behaviour with absolute widths. Use relative widths.

example:

.postWid {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
}