引导容器彼此浮动

Question

I cannot figure out why this bootstap code is overlapping the containers on top of each other. I have looked at some of the other people having this issue and I dont think my code has the same error. I think I might be writing css when I should be using bootstrap.

jsfiddle: http://jsfiddle.net/qqxudtst/1/

code:

<section class="section" id="homeHeader">
    <div class="container-fluid">
        <div class="background-img">
        </div>
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12">
                <div class="text-center">
                    <div class="row">
                       <div class='text-justify content-spacing col-lg-7 col-md-12 col-sm-12'>
                          <h2>SomeContest:</h2>
                          <h1>Before and After: A Story</h1>
                          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut volutpat orci. Nulla vulputate erat turpis, eget convallis augue tincidunt eu. Cras bibendum diam purus, sit amet commodo ante tincidunt ut. Mauris sed tempus neque. Ut efficitur dui ut eros pulvinar scelerisque. Nullam a sagittis ipsum. Morbi eu pretium dui. Etiam non diam in ex commodo finibus in eget lacus. Curabitur tempus lacinia arcu ac ultricies. Donec bibendum lectus enim.</p>

                          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut volutpat orci. Nulla vulputate erat turpis, eget convallis augue tincidunt eu. Cras bibendum diam purus, sit amet commodo ante tincidunt ut. Mauris sed tempus neque. Ut efficitur dui ut eros pulvinar scelerisque. Nullam a sagittis ipsum. Morbi eu pretium dui. Etiam non diam in ex commodo finibus in eget lacus. Curabitur tempus lacinia arcu ac ultricies. Donec bibendum lectus enim.</p>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-6">
                            <a class="btn btn-default btn-block" id="submitVideo">Submit Video</a>
                        </div>
                        <div class="col-sm-6">
                            <p id="contactSupport">Questions? Contact <a href="#">support</a></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<section class="section" id="tabContent">
    <div class="container">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut volutpat orci. Nulla vulputate erat turpis, eget convallis augue tincidunt eu. Cras bibendum diam purus, sit amet commodo ante tincidunt ut. Mauris sed tempus neque. Ut efficitur dui ut eros pulvinar scelerisque. Nullam a sagittis ipsum. Morbi eu pretium dui. Etiam non diam in ex commodo finibus in eget lacus. Curabitur tempus lacinia arcu ac ultricies. Donec bibendum lectus enim.</p> 
    </div>
</section>

Any help/ideas would be appreciated, thanks.

-AA

Answer 1

Remove all of your position:absolute attributes. You're positioning all of these elements on top of each other.