Positioning: Margin Bottom Not Working ? Tea Cozy Project

Hello,

I have been doing this project called Tea Cozy and when I try to move the logo on the top left and the list elements on the top right up from the white line using margin bottom, it does not work. Why is this? Margin right and left seem to work just fine.

<!DOCTYPE html>
<html>
	<link rel="stylesheet" type="text/css" href="./Style.css">

<header>
	<title>Tea Cozy</title>
		<div>
				<img class="logo" src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-tea-cozy-logo.png">
			<nav>
				<ul>
					<li>Mission</li>
					<li>Featured Tea</li>
					<li>Locations</li>
				</ul>
			</nav>
		</div>
</header>

html{
font-family:Helvetica;
font-size: 22px;
color: seashell;
background-color:black;
opacity:0.9;
text-align: center;
}
li{
text-decoration: underline;
font-weight: bold;
display:inline-block;
padding:15px;
float: right;
}

header{
background-color: black;
position: fixed;
width: 100%;
z-index: 2;
border-bottom: 1px solid seashell;
height:69px;
.logo{
height: 50px;
float:left;
margin-left: 10px;
margin-bottom: 9.5px;
margin-top: 9.5px;
}
}