Bootstrap grid system not working the way expected - css

Question

I am new to bootstrap and the grid system, but as far as i am concerned the code i have build should do the following:
This is a brief example of what it should look like on desktop:
and mobile:
I intend to add padding etc, which is in a JS fiddle.
I think it may be something to do with my CSS..
My CSS:
#history-img img
{
width: 300px;
height: 400px;
float: left;
margin-left: 100px;
margin-top: 35px;
border: 2px solid #000;
}
#history
{
background-color: #0088CE;
}
#history-text
{
width: 800px;
height: 400px;
border: 2px solid #000;
background-color: #FFF;
float: right;
margin-top: 35px;
margin-right: 100px;
color: #000;
text-align: left;
padding: 30px;
}
#history-text p
{
font-size: 16px;
}

Answer 1

Like the comments have said don't do that with your css. The max of what you have should be CSS:
#history-img img {
border: 2px solid #000;
}
#history-text{
border: 2px solid #000;
background-color: #FFF;
color: #000;
}
#history-text p{
font-size: 16px;
}
Here's a more bootstrap specific layout:
<section class="success" id="history">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2>A brief History of Doosan Babcock</h2>
</div>
</div>
<div class="row">
<div id="history-img" class="col-xs-4 col-lg-4">
<img src="img/1920/babcock_team_1920_sm.jpg" alt="babcock team 1920"/>
</div>
<div class="col-xs-6 col-sm-8 col-lg-8" id="history-text">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et.</p>
</div>
</div>
</div>
</section>
Bootply http://www.bootply.com/HORwI8RjP3

Answer 2

The col- classes assign a width for you. I made a new fiddle which should help you get started
https://jsfiddle.net/5z6ojmm1/2/
What you want is one .row inside a .container with 2 col-md-6 or col-lg-6 classes. This means that the content will be split 50/50
<div class="row">
<div class="col-md-6">
<!-- image -->
</div>
<div class="col-md-6">
<!-- text -->
</div>
</div>
Collapse on mobile
If you want to have the columns underneath each other on mobile you can specify so by using the following
<div class="row">
<div class="col-xs-12 col-md-6">
<!-- image -->
</div>
<div class="col-xs-12 col-md-6">
<!-- text -->
</div>
</div>
Note the col-xs-12 and the col-md-6, This means on XS devices it will collapse to two 12 ( 100% ) columns and on MEDIUM it will split in 2 times 6.
This is the grid system explained
http://getbootstrap.com/css/#grid-options