I'm learning to build websites. Can someone tell me what's wrong with the following code ? When I look at my website from a mobile, the image do not remain within the span3 "container" and therefore the image end up one on the other. Would it have to do with CSS ?

Thanks for your help. I've been trying to figure it out for hours.



<div class="span3" >

<h5>MERCHANDISE</h5>
<p><br></p>

<div class="flip-container2" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">

<!-- front content -->
<a href="http://johndoe.com" target="_blank">
<img class="blogo4" border="0" alt="John Doe" <img src="images/iszmarket.png"/></a>
</div>
<div class="back">
<!-- back content -->
<a href="http://johndoe.com" target="_blank">
<img class="blogo4" border="0" alt="John Doe" <img src="images/iszmarket.png"/></a>
</div>
</div>
</div>
</div>



<div class="span3" >

<h5>CONTACT John Doe</h5>
<p><h6> Email: <a>info@john.com</a> </h6></p>

<div class="flip-container3" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">

<!-- front content -->
<a href="http://johndoe.com" target="_blank">
<img class="blogo4" border="0" alt="John Doe" <img src="images/isz145.png"/></a>
</div>
<div class="back">
<!-- back content -->
<a href="http://johndoe.com" target="_blank">
<img class="blogo4" border="0" alt="John Doe" <img src="images/isz145.png"/></a>
</div>
</div>
</div>
</div>