Iframe creates extra space below

iframe is an inline element. This takes whitespace in your HTML into account. display:inline-block is notorious for being difficult.

Add display:block; to the CSS for your iframe.

Add display:block; to your Iframe style like so:

.border iframe {
    border: none;
    width: 300px;
    height: 100px;
    margin: 0;
    padding: 0;
    opacity: 0.8;
    display:block; /* Add this */
}

Iframe is an Inline Frame, meaning that it is an inline element, which like the img tag, can have issues with whitespace. Setting display:block; on it turns the Iframe into a block element (like a div), which will remove the whitespace issue.