html - (Bootstrap 3) Text and images with jumbotron get distorted when changing screen sizes -

today have made webpage using bootstrap 3, have change 'jumbroton' coding make this: http://www.bootply.com/103783

although background image shows through, when resize page doesn't not resize instead puts text , image within 'jumbotron' underneath else.

i have tried putting 'container' around the'jumbotron' no luck... :(

my website: http://warfacecommunity.bugs3.com/

try scrolling in , see meant!

css code in 'style.css'

.bg {   background: url('/img/bg.jpg') no-repeat center center !important;   position: fixed !important;   width: 100% !important;   height: 350px !important; /*same height jumbotron */   top:0 !important;   left:0 !important;   z-index: -1 !important; }  .jumbotron {   margin-bottom: 40px !important;   height: 350px !important;   color: white !important;   text-shadow: black 0.1em 0.3em 0.3em !important;   background:transparent !important; 

html 'jumbotron'

<div class="jumbotron">                 <img src="./img/the-blue-tick-md.png" alt=" " vspace="20" class="pull-right" class="img-responsive"/>                 <h1>                     hello, world!                 </h1>                  <p>                     template simple marketing or informational website. includes large callout called hero unit , 3 supporting pieces of content. use starting point create more unique.                 </p>                 <p>                     <a class="btn btn-primary btn-large" href="#">learn more</a>&nbsp;<a class="btn btn-primary btn-large" href="#">extras</a>                 </p>             </div> 

you close,

you should divide in 2 parts. , add jumbotronwidth class max-width make responsive

<div class="jumbotron"> <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 pull-right ">                 <img vspace="20" class="jumbotronwidth" alt=" " src="./img/the-blue-tick-md.png"> </div> <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">                 <h1>                     hello, world!                 </h1>                  <p>                     template simple marketing or informational website. includes large callout called hero unit , 3 supporting pieces of content. use starting point create more unique.                 </p>                 <p>                     <a class="btn btn-primary btn-large" href="#">learn more</a>&nbsp;<a class="btn btn-primary btn-large" href="#">extras</a>                 </p>             </div></div> 

css

.jumbotronwidth { max-width:100%; }