Nav elements on bottom

How do I do that?

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<body>
     <img src="https://www.google.at/images/srpr/logo11w.png" width="368" height="138" alt="Logo" />
<!-- Nvigationselemente -->   
	<div class="nav">
		<div class="container">
			<ul class="pull-left">
				<li><a href="#">home</a></li>
				<li><a href="#">über uns</a></li>
				<li><a href="#">anfahrt</a></li>
			</ul>
			<ul class="pull-right">
		    	<li><a href="#">produkte</a></li>
				<li><a href="#">leistungen</a></li>
				<li><a href="#">termin</a></li>
			</ul>
		</div> <!-- container -->    
        <div class="logo">
     	  
        </div> <!-- logo -->
    </div> <!-- nav -->
</body>

CSS

.nav a {
	  color: #5a5a5a;
	  font-size: 11px;
	  font-weight: bold;
	  padding: 14px 10px;
	  text-transform: uppercase;
}

.nav li {
	  display: inline;
	  padding-bottom: 1px;
}

.logo{
	text-align: center;
	margin-top: 100;
}
img {
    display:block;
    margin:auto;
}