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>


36a4f7c8936045a78ca089fd11abc958.png

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>
July 8th 19 at 16:30
3 answers
July 8th 19 at 16:32
You have blocks of different heights.
Use either display:flex; or display:table, display:table-cell
and for the image it is better to use max-width:100%;
July 8th 19 at 16:34
And there is a link to the site? I think this problem is better to solve using the debugger browser. There is clearly more to catch you.
For example in chrome it's ctrl+shift+i
goo.gl/UUxA6S

Yes I have many hours to kill...I don't understand already.
I use www.onlinehtmleditor.net and everything is clear, the site is flooded and ass.
Wanted on jsfidle to throw, there is some reason too, asshole.. - Jaqueline_Parke commented on July 8th 19 at 16:37
: can here css-reset some your is. And the variant with the Flex is great! https://htmlacademy.ru/courses/96 - cayla.Murazik6 commented on July 8th 19 at 16:40
: https://jsfiddle.net/2r4s680q/ now with the Flex, nothing different happens.. - Jaqueline_Parke commented on July 8th 19 at 16:43
: Flex must be a parent container, and control the elements also need it. - cayla.Murazik6 commented on July 8th 19 at 16:46
Maxim Lumen the way suggested, all ready... Maybe even a problem in png images? - cayla.Murazik6 commented on July 8th 19 at 16:49
in his version, quite in the line of text to insert as the line wrapping breaks the integrity of the - Jaqueline_Parke commented on July 8th 19 at 16:52
July 8th 19 at 16:36
https://jsfiddle.net/x9nrk17k/ maybe so ?I icons especially not soared , in principle it seems
No, it is not so. I need the text not in a row empty, and vertically. In this case, in your option, all moves even more than me (the first band), in the second embodiment (second band), the image goes out of borders and the background does not stretch. - Jaqueline_Parke commented on July 8th 19 at 16:39

Find more questions by tags HTMLCSS