Django CSS working wierdly on Google Chrome

Django CSS working wierdly on Google Chrome

So, I have this Django project in which I wanted to display a navbar on
the side of a header image. As the image is big, though, I wanted to make
the navbar apear a little closer to the bottom of the image. I tried this:
#header img {
margin: 5% 0;
display: inline;
vertical-align: -27%;
}
#navbar {
margin: -3%;
padding: 2% 0;
display: inline;
background-color: rgba(100, 100, 100, 0.4);
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}
And it worked just fine in Safari, but in Google Chrome the navbar keeps
apearing bellow the image, and the only way to make it appear in the right
place is to change the vertical-align to -300% or a number high as that,
which, then, causes the navbar to apear way over the image in Safari.
I searched this on google but I couldn't find anything. If it helps, I am
using Mac OS X.