How do I stop some form of text wrapping happening between divs?

How do I stop some form of text wrapping happening between divs?


When I change the font and the size I get some weird wrapping as shown in
the second picture below. Not sure how to stop this and why its happening?
I've pasted the HTML and CSS code below thats being used.
<div class="wrap">
<div id="block1">
<p><img src="img/cheese1.jpg" alt="Cheese Picture" id="intro_pic" ></p>
<h2 id="intro">
The best selection of cheese I've ever seen! Cannot wait for our
next order!
</h2>
</div>
</div>
<div class="wrap">
<div id="block2">
<h2 id="intro2">
The best selection of cheese I've ever seen! Cannot wait for our
next order!
</h2>
<p><img src="img/cheese1.jpg" alt="Cheese Picture" id="intro_pic2" ></p>
</div>
.wrap {
margin: 0 auto;
max-width: 58%;
-webkit-columns: 100px 2;
box-sizing: border-box;
margin: 50px auto;
padding: 40px;
width: 78%;
border: 1px solid rgba(87,104,115, .9);
border-radius: 12px;
background: rgba(255,255,255,.9);
}
#intro {
padding: 1.3em 0 1.3em 0;
text-align: left;
float: right;
font-size: 3em;
line-height: 1.5;
letter-spacing: -1px;
color: #2B9BD4;
margin: 1.35em 0 .8em 0;
overflow: hidden;
}
#intro2 {
padding: 1.3em 0 1.3em 0;
text-align: right;
float: right;
font-size: 3em;
line-height: 1.5;
letter-spacing: -1px;
color: #2B9BD4;
margin: 1.35em 0 .8em 0;
overflow: hidden;
}
#intro_pic {
text-align: left;
float: right;
}
#intro_pic2 {
text-align: right;
float: left;
}