Personally, I always try to avoid using the inline block, simply because of the cross browser with ropey support.
I would use the following CSS (removing the display: inline-block; using float: left in it place (ensuring that the parent element also floats to ensure that the child floating elements are cleared):
section#main{ width: 960px; margin: 7% auto 0; float:left; background: #000; opacity: 0.86; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; padding: 5px; } div#video{ border: 1px solid red; width: 640px; height: 360px; margin: 10px; float:left; } nav{ margin: 10px; border: 1px solid yellow; float:left; height: 360px; width: 270px; } nav ul { margin:0; padding:0; list-style:none; } nav li { color:#fff; }
source share