Static Map positioning - html

Question

I need a some help with positioning a static Google Maps map.
There are two problems:
Having the static map on the same level/line as the writing, the writing on the left and the map on the right
Keeping the footer on the bottom of the page
CodePen DEMO
HTML:
<div class="wrapper">
<ul class="nav">
<li class="home">Home
</li>
<li class="location">Location
</li>
<li class="itinerary">Itinerary
</li>
<li class="photos">Howard & Mary
</li>
</ul>
</div>
<h1>Location</h1>
<p class="grid">USS NORTH CAROLINA
<br/>Address: 1 Battleship Rd NE, Wilmington, NC 28401, United States Telephone: + 1 910-251-5797 wesbite: www.battleshipnc.com/
</p>
<div class="map">
<p class="static_map">
<img src="http://maps.googleapis.com/maps/api/staticmap?parameters?key=AIzaSyDM-P7a6oHU7e-guJpKQPADlGPtX1_iPBU&size=400x300&sensor=false&markers=1+Battleship+Rd,+Wilmington,+North+Carolina+28401" alt+ "1 Battleship Rd, Wilmington, North Carolina 28401"/>
</p>
</div>
<script type = "text/javascript" src = "js/jquery.js"></script>
<script type="text/javascript" src="https: //maps.googleapis.com/maps/api/js?key=AIzaSyDM-P7a6oHU7e-guJpKQPADlGPtX1_iPBU&sensor=false"></script>
<footer class="main-footer">
<h1 class="tri">All donations & proceeds will go towards Dare 2 Tri</h1>
</footer>
CSS:
body {
background-image: url("http://i.istockimg.com/file_thumbview_approve/1985611/2/stock-photo-1985611-uss-north-carolina.jpg");
background-repeat: no-repeat;
background-size: cover;
}
h1 {
text-align: center;
color: #0051c2;
font-size: 80px;
}
.grid {
color: #0051c2;
font-size: 40px;
width: 45%;
margin-left: 10px;
}
.map {
margin-right: 10px;
float: right;
}
.wrapper {
position: relative;
top: 10px;
height: 175px;
width: 1100px;
background-color: black;
opacity: 0.8;
margin: auto;
border-radius: 10px;
z-index: 0;
}
.main-footer {
position: absolute;
bottom: 0;
width: 100%;
height: 50px;
background-color: black;
opacity: 0.8;
text-align: center;
}
.tri {
color: white;
font-size: 16px;
}
ul.nav {
display: inline;
color: white;
text-decoration: none;
text-align: center;
padding: 8px 15px;
border-radius: 5px;
text-align: auto;
}
ul.nav li {
float: left;
margin-left: 50px;
}
ul.nav li.home {
padding: 35px 15px;
margin: 20px;
top: 15px;
font-weight: 100;
height: 55px;
width: 130px;
font-size: 40px;
}
ul.nav li.home:hover {
background-color: #0051c2;
border-radius: 8px;
}
ul.nav li.location {
padding: 35px 15px;
margin: 20px;
font-weight: 100;
top: 15px;
height: 55px;
width: 180px;
border-radius: 5px;
font-size: 40px;
}
ul.nav li.location:hover {
background-color: #0051c2;
border-radius: 8px;
}
ul.nav li.itinerary {
padding: 35px 15px;
margin: 20px;
font-weight: 100;
height: 55px;
width: 200px;
border-radius: 5px;
font-size: 40px;
}
ul.nav li.itinerary:hover {
background-color: #0051c2;
border-radius: 8px;
}
ul.nav li.photos {
padding: 35px 15px;
margin: 20px;
margin-left: 20px;
border: 0;
font-weight: 120;
height: 55px;
width: 250px;
border-radius: 5px;
font-size: 40px;
}
ul.nav li.photos:hover {
background-color: #0051c2;
border-radius: 8px;
}
ul.nav li a {
color: #faf3bc;
display: block;
text-decoration: none;
}

Answer 1

First Issue: Aligning address with map
Make your 'grid' p into a div and add float:left to your .grid CSS.
Example: http://codepen.io/anon/pen/kwJcE
Second Issue: Sticky Footer
Duplicate question, see here: Make footer stick to bottom of page correctly
Direct link: "A CSS Sticky Footer that just works"
Bonus Third Issue: Terrible Design
I would never tell anyone they are learning 'wrong' but check out grid systems/frameworks, especially responsive grid systems. It will help you build faster with a better aesthetic.