html - div 間で何らかの形式のテキストの折り返しが発生しないようにするにはどうすればよいですか?

Question

フォントとサイズを変更すると、下の図に示すように奇妙な折り返しが表示されます。これを止める方法と、なぜそれが起こっているのかわからない?

使用されている HTML と CSS コードを下に貼り付けました。テキストが折り返しているように見えますか?

<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;
    }