Image not aligning horizontally after trying several common solutions - html

Question

It works fine on Desktop because I use width: 100%. But on Mobile I do width: 50% and try to center it.
I have tried setting the img.youtube-thumb to margin-left: auto; and margin-right: auto; I've also tried setting the images parent element to text-align: center; and having the image displayed as inline-block, and that doesn't work either.
I'm not sure what else to try, as it seems that every S.O answer I run into provides one of the two above solutions.
Here's a CodePen but I'm not sure how valuable it'll be since I cant seem to get it exact without pasting the entire project into the pen. http://codepen.io/anon/pen/yOEQKg
Here's the HTML for one of the images:
<section class="container-fluid">
<div class="section group">
<div class="col span_6_of_12">
<div class="thumbnail project">
<h3>Some title</h3>
<div class="youtube-container">
<div class="youtube-player" data-id="ZMJP-FFzaZk">
<div>
<img class="youtube-thumb" src="//i.ytimg.com/vi/ZMJP-FFzaZk/hqdefault.jpg">
<div class="play-button"></div>
</div>
</div>
</div>
<div class="caption">
<p>blablablablabla</p>
</div>
</div>
</div>
my CSS code:
/* inside media query */
.youtube-player {
position: absolute;
text-align: center;
width: 100%;
height: 100%;
}
/* inside media query*/
img.youtube-thumb {
bottom: 0;
display: inline-block;
margin-left: auto;
margin-right: auto;
max-width: 50%;
width: 50%;
height: 100%;
position: absolute;
}
.project {
text-align: center;
}
/* for entire site */
.youtube-container {
position: relative;
padding-bottom: 300px; /* 16:9 */
padding-top: 25px;
height: 0;
}
/* for entire site */
div {
text-align: left;
}
/* 12 Grid Column Setup??? */
/* SECTIONS */
.section {
clear: both;
padding: 0px;
margin: 0px;
}

Answer 1

img.youtube-thumb {
bottom: 0;
display: inline-block;
margin-left: auto;
margin-right: auto;
max-width: 50%;
width: 50%;
height: 100%;
position: absolute;
}
into this:
img.youtube-thumb {
top: 0;
display:block;
left:0;
right:0;
margin:auto;
max-width: 50%;
width: 50%;
height: 100%;
position: absolute;
}
Hope it helps