html - Image will not fix center on tablet screen sizes and smaller -

i attempting fix personal website project have image refuses centered on mobile/tablet screen sizes. have tried manner of custom css no avail.i have quite few media queries @ different sizes, can't find conflicting styles.i using bootstrap framework on project. website here.

here html

<div class="about">   <a name="abouty"></a>       <h1 class="text-center">about</h1>       <p class="text-center" id="myth">the man...the myth...the legend</p>       <article>         <div class="img-wrap">           <img id="pic" src=" http://goodedevelopment.com/images/selfie.jpg" alt="a picture of myself,one handsome devil">         </div>         <p class="bio">           kyle goode young, caffeine dependent, nashville local. went school in small town west of nashville met , married high school sweetheart. in small town kyle's passion technology began.kyle has been amazed           technology , programming child,from trying read code , realizing couldn't read long "words" making taking apart family computers, chagrin of parents. though adult life has           been spent in medical field, kyle excited begin transitioning hobby , passion profession.         </p>       </article>        <div class="container" id="mine">         <h1 class="text-center" id="kyle">kyle goode-the man in bullet points</h1>         <ul class="text-left" id="profile">           <li>good samaritan</li>           <li>prefers puns intended</li>           <li>especially gifted napper</li>           <li>devoted both programming , game of thrones</li>           <li>codes fun</li>           <li>making history</li>           <li>goes survival mode if tickled</li>           <li>anxiously awaiting connect him projects.</li>         </ul>       </div>     </div> 

and here css,many , help.

@media screen , (max-width: 767px) #pic {     overflow: auto;     margin: auto;     position: absolute;     left: 0;     bottom: 157px;     right: 0; } @media screen , (max-width: 825px) #pic {     width: 119%;     height: auto;     position: relative;     right: -209px;     top: 229px; } @media screen , (max-width: 965px) #pic {     width: 130%;     height: auto;     position: relative;     right: -222px;     top: 264px; } @media screen , (max-width: 1040px) #pic {     width: 133%;     height: auto;     position: relative;     right: -280px;     top: 231px; } @media screen , (max-width: 1100px) #pic {     height: 315%;     width: auto;     position: relative;     right: 400px;     top: 6px; } @media screen , (max-width: 1199px) #pic {     width: auto;     height: 388%;     position: relative;     right: 446px; } @media screen , (max-width: 1300px) #pic {     height: 390%;     width: auto;     position: relative;     right: 436px; } @media screen , (max-width: 1450px) #pic {     width: 295%;     height: auto; } #pic {     width: auto;     height: 348%;     position: relative;     top: 10px;     right: 415px; } .img-wrap img {     width: 100%; } img {     vertical-align: middle; } img {     border: 0; } * {     -webkit-box-sizing: border-box;     -moz-box-sizing: border-box;     box-sizing: border-box; } 

you're on doing media queries , relative positioning. mention bootstrap, there's no bootstrap features being used.

when comes about me section , using bootstrap use markup similar this:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>  <div class="container">    <div class="row">      <div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0 col-sm-push-8 col-md-6 col-md-push-0">        <img class="img-responsive center-block" src="http://placehold.it/600x800/fc0/&text=pic">      </div>      <div class="col-xs-12 col-sm-8 col-sm-pull-4 col-md-6 col-md-pull-0">        <ul>          <li>lorem ipsum dolor sit amet, consectetur adipiscing elit. maecenas vehicula elit orci, vitae ultrices ex fringilla vel. suspendisse potenti. pellentesque ac nisi quis neque sodales feugiat.</li>          <li>lorem ipsum dolor sit amet, consectetur adipiscing elit. maecenas vehicula elit orci, vitae ultrices ex fringilla vel. suspendisse potenti. pellentesque ac nisi quis neque sodales feugiat.</li>          <li>lorem ipsum dolor sit amet, consectetur adipiscing elit. maecenas vehicula elit orci, vitae ultrices ex fringilla vel. suspendisse potenti. pellentesque ac nisi quis neque sodales feugiat.</li>          <li>lorem ipsum dolor sit amet, consectetur adipiscing elit. maecenas vehicula elit orci, vitae ultrices ex fringilla vel. suspendisse potenti. pellentesque ac nisi quis neque sodales feugiat.</li>          <li>lorem ipsum dolor sit amet, consectetur adipiscing elit. maecenas vehicula elit orci, vitae ultrices ex fringilla vel. suspendisse potenti. pellentesque ac nisi quis neque sodales feugiat.</li>        </ul>      </div>    </div>  </div>

above demo , you'll need adjust things suite specific needs should need go.

i've used column resets, offsetting columns , column ordering achieve desired layout @ various viewport sizes.