html - img-circle going outside margin -

i've created img-circle placed on same row paragraph of text using 2 .col-xs-6, image spilling on margin of container.

i have tried changing padding 0, didn't work.

i don't have css styling img-circle currently.

<div class="container about">      <div class="row">           <div class="col-xs-6">                  <p class="hello">hello,</p>           </div>       </div>       <div class="row">             <div class="col-xs-6">                  <p class="intro">text paragraph here</p>             </div>             <div class="col-xs-6">                  <img class="profile-pic img-circle" src="#"/>              </div>       </div> 

you need use class .img-responsive in img, see bootstrap docs

images in bootstrap 3 can made responsive-friendly via addition of .img-responsive class. applies max-width: 100%;, height: auto; , display: block; image scales nicely parent element.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>  <div class="container about">    <div class="row">      <div class="col-xs-6">        <p class="hello">hello,</p>      </div>    </div>    <div class="row">      <div class="col-xs-6">        <p class="intro">text paragraph here</p>      </div>      <div class="col-xs-6">        <img class="profile-pic img-circle img-responsive" src="//lorempixel.com/1000/1000" />      </div>    </div>  </div>