Different output coming in web browsers for same CSS

Hello Everybody
I am trying to place navigation button right side of logo but Google Chrome 30 not accepting my code, where as my code is working perfect in FF 25.0 and IE 9. For testing purpose I uploaded the files here contact us,Kindly check in Chrome and FF and IE then you can see the problem. Or kindly see the attached images.
Image from FireFox

Image from Google Chrome

Here is my HTML code

<div class="container">
<!-- Top Navigation -->
  <div class="codrops-top clearfix">
    <span class="right"><a class="codrops-icon codrops-icon-drop" href="#"><span>Back to the Codrops Article</span></a></span>
    <img src="images/demo4/othermanazeschoollogo.jpg" width="430" height="109" />
      <nav class="codrops-demos">
    <a href="index.html">Home</a>
    <a href="http://software.manazeschool.com">Demo</a>
    <a href="index4.html">Clients</a>
    <a class="current-demo" href="#">Contact</a>
  <form method="post" action="mailsend.php" name="form1">
     <table width="57%" border="1" style="text-align:left;">

CSS code

/* Header Style */
.container > header {
    margin: 0 auto;
    padding: 0.5em;

.container {
    height: 100%;

.container > header {
    background: rgba(0,0,0,0.03);
/* Demo Buttons Style */
.codrops-demos {
    padding-top: 1em;
    font-size: 0.9em;

.codrops-demos a {

    margin: 0.2em;
    padding: 0.45em 1em;
    background: #555;
    color: #fff;
    font-weight: 700;
    border-radius: 2px;

.codrops-demos a:hover,
.codrops-demos a.current-demo,
.codrops-demos a.current-demo:hover {
    opacity: 0.6;

.codrops-nav {
    text-align: center;

.codrops-nav a {
    display: inline-block;
    margin: 20px auto;
    padding: 0.3em;

Try adding this to your styles:

header {overflow: hidden;}

header img {float: left;}

OOhh GREAT…! Thank you, Thank you very much. It works in all 3 browser.

Glad it helped. :slight_smile: