Can't exactly fill the background, move out. How to do it?

Please help.

Use 2 DIVS to build 2 columns.
a 1-column picture in the second text.
Check all the online html editor and then paste on the website and see that the fill is not evenly fills.

What is the css property that I need to register to fill in the entire background of the div is fully on a level with the second?

<style>



.wrap {
 overflow: hidden;
}

.col-2 {
 background: #eee;
 background-clip: border-box;
 padding: 155 px;
 margin: 15px 0;
 border: 0px solid #ccc;
 width: 50%;
 float: none;

}

.col-3 {
 background: #fff;
 background-clip: border-box;
 padding: 10px;
 margin: 5px 0;
 border: 0px solid #ccc;
 width: 30%;
 float: none;

}

@media only screen and (min-width: 550px){
 .col-2 {
 width: 30%;
 float: left;
}

@media only screen and (min-width: 220px){
 .col-3 {
 width: 30%;
 float: left;
}
}

</style>

And be to center. If this is written in the CSS instead of the current "left" then everything is in one column.
An example of my HTML;

<div class="wrap">
 <div class="col-2">
<p>
 <img src="http://old.akvist.ru/img/p/p6.png" align="left" width="133">
</p>
 </div><div class="col-2">
<p>
 <b>will Help you explore the</b>
</p>
<p>
<b>
 and to take order</b>
</p>
<p>
 Together we will assess the product and check for conformity

 and safety
</p>
</div>
 </div>