Insert two responsive youtube video on the same row

Hi everyone and thank you for taking the time to read this. My problem is following. I'm trying to put 2 youtube videos on the same row and it's causing me some problem. So far, this what I have: Html:

<div class="vimeo-wrapper">
<div class="vimeo-video-1 vimeo-standard">
<iframe width="560" height="315" src="https://www.youtube.com/embed/hygokYbjbeY?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
<div class="vimeo-video-2 vimeo-standard">
<iframe width="560" height="315" src="https://www.youtube.com/embed/O1XotwR0_H0?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<h2 id="cotizacion" style="color: white; border-radius: 8px; background-color: #008cba; text-align: center; display: center; font-size: 20px; padding: 14px 40px;"><strong>FILL OUT THIS FORM AND GET YOUR QUOTE WITHIN AN HOUR (DURING BUSINESS DAYS)</strong></h2>

css:

.postid-2916 .vimeo-wrapper {
    max-width: 980px;
    position: relative;
    margin: 0 auto;
    border: 1px solid green;
    padding-bottom:10px;
}

.postid-2916 .vimeo-standard {
    float: left;
    height: 300px;
    width: 47%;
    border: 1px solid #000;
    margin: 10px;
}

.postid-2916 iframe {
    width: 100%;
    height: 100%;
}


.postid-2916 @media (max-width:767px) {

.postid-2916 .vimeo-standard {
        float: none;
        width: 80%;
        margin: 0 auto;
        padding-bottom: 10px;
    }
}

.postid-2916 .clearfix:before, .clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.postid-2916 .clearfix:after {
    clear: both;
}

Somehow this is what I get screenshot it seems that my wrapper doesn't include my 2 videos. Any idea of what's causing this?