Image will not fix center on tablet screen sizes and smaller

I am attempting to fix a personal website project where I have a image that refuses to be centered on mobile/tablet screen sizes. I have tried all manner of custom css but to no avail.I have quite a few media queries at different sizes, however I can't find any conflicting styles.I am using the bootstrap framework on this project. The website is here.

Here is my 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 is a young, caffeine dependent, Nashville local. He went to school in a small town just West of Nashville where he met and married his high school sweetheart. It is in that small town that Kyle's passion for technology began.Kyle has been amazed
with technology and programming even as a child,from trying to read code and quickly realizing he couldn't read the long "words" it was making to taking apart the family computers, much to the chagrin of his parents. Though his adult life has
been spent in the medical field, Kyle is excited to begin transitioning his hobby and passion to his profession.
</p>
</article>