ブートストラップ、画像とテキストの間にスペースを追加するにはどうすればいいですか？

Question

私はイメージとテキストを並べていますが、今度は、テキストとイメージの各セットの間にあるスペースを追加する必要があります。ここに私のコード。

.container { 
 
    float: left; 
 
    display: block; 
 
    margin-top: 5%; 
 
}

<div class="container"> 
 
    <!--Row with three equal columns--> 
 
    <div class="row"> 
 
    <div class="col-md-4"> 
 
     <div class="demo-content"> 
 
     <img src="images/squareicon.png" class="pull-left"> 
 
     <h3>Versatile Spaces</h3> 
 
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> 
 
     </div> 
 
    </div> 
 
    <div class="col-md-4"> 
 
     <div class="demo-content bg-alt"> 
 
     <img src="images/pointericon.png" class="pull-left"> 
 
     <h3>Central Location</h3> 
 
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> 
 
     </div> 
 
    </div> 
 
    <div class="col-md-4"> 
 
     <div class="demo-content"> 
 
     <img src="images/foodicon.png" class="pull-left"> 
 
     <h3>Catering to Taste</h3> 
 
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

あなたのイメージに余裕を与えることができます。

.demo-content img { 
    margin-right: 20px; 
}