"Unexpected CSS token: {" in Safari and unexplained gap between divs

Question

I feel like I'm losing my mind. I'm writing HTML and CSS for a webpage, and a gap appeared between two divs that I cannot get to go away (or get bigger, for that matter). I am viewing it in Safari 7.0.1 and Chrome 32.0.1700.77. The clues...

• When using the dev tools to highlight elements, the gap highlights orange, indicating it's a margin.

• According to the calculated CSS rules on the side, the margins are set to 0 for the furthest in div and its container div as well, but the gap remains.

• Finally checked the console, and it reports "Unexpected CSS token: {" on two consecutive lines (95, 96).

• In Chrome, the space remains, but the error message is no longer.

• Ran the CSS through a validator...and there were no warnings or errors (except for "unknown vendor flags").

• Tried the font-size: 0, removing whitespace between HTML elements, and making sure nothing was inline already (as far as I know).

Could there be some hidden/unprintable character or something silly I'm missing??

The important CSS is here, the rest is on jsfiddle.

#logo-banner-container {
    width: 30%;
    float: left;
}

#logo-banner {
    width: 95%;
    height: 430px;
    margin-right: 0px;
    font-size: 0;
    background-color: rgba(250, 250, 250, 0.4);
}

img#logo {
   width: 90%;
   height:  auto; /* Ensures proportional scaling of the image */
}

Code here

Note: Images have been commented out or replaced. No other changes were made

Answer 1

#logo-banner {
    width: 95%;

Removing the width setting will fix your issue.