I'm having trouble centering an image in my lower body div. I've tried different methods in the CSS but nothing seems to work. I'm new to this and trying to troubleshoot on my own, but it's confusing me. Any help would be appreciated.
HTML
<!DOCTYPE HTML>
<html>
<head>
<link type="text/css" rel="stylesheet" href="dereke.css"/>
<title>
</title>
</head>
<body>
<div class="Header">
<p>Ohio State Buckeyes</p>
<div id="logo">
<img src="http://vignette2.wikia.nocookie.net/logopedia/images/6/6f/1000px-Ohio_State_Buckeyes_logo_svg.png/revision/latest?cb=20130425230958" />
</div>
<div id="navbar">
<ul>
<li>Home</li>
<li id="noUD">|</li>
<li>About Us</li>
<li id="noUD">|</li>
<li>Contact Us</li>
</ul>
</div>
</div>
<div id="leftbody">
<img src="http://printableteamschedules.com/images/collegefootball/ohiostatebuckeyesfootballschedule.gif" />
</div>
<div id="rightbody"></div>
<div id="lowerbody">
<img src="http://grfx.cstv.com/schools/osu/graphics/facilities/stadium-night-800x325.jpg" />
</div>
<div class="footer"></div>
</body>
</html>
CSS
.Header {
width: calc(100%-16px);
height: 150px;
border-radius: 5px;
}
.Header p {
color: white;
margin-top: -5px;
width: 600px;
font-size: 70px;
}
.MidBody {
background-color: #141414;
width: 100%;
height: 850px;
margin-top: 10px;
border-radius: 5px;
position: relative;
display:block;
}
.footer {
bottom: 0;
height:50px;
width: 100%;
margin-top: 10px;
background-color: #CCCCCC;
border-radius: 5px;
clear:both;
position:relative;
}
#leftbody {
width: 49%;
height: 425px;
left: 0;
margin-top: 3px;
margin-left: 3px;
position: relative;
z-index: 1;
border-radius: 5px;
float:left;
}
#leftbody img {
width: 490px;
height: 420px;
border-radius: 5px;
margin-top: 2px;
margin-left: 2px;
}
#rightbody {
background-color: #F1F1F1;
width: 49%;
height: 425px;
margin-top: 3px;
margin-right: 3px;
position: relative;
z-index: 1;
border-radius: 5px;
float:right;
}
#lowerbody {
width: 100%;
height:auto;
text-align: center;
postion: relative;
display:block;
}
#lowerbody img {
position:relative;
border-radius: 5px;
}
body {
background-color: black;
}
li {
display: inline;
padding: 1px;
text-decoration: underline;
}
#navbar {
width: 350px;
color: #F8F8F2;
font-family: Arial Black;
margin: -35px;
text-align: left;
line-height: 10px;
}
#noUD {
text-decoration: none;
}
#logo img {
margin-top: -150px;
margin-right: 50px;
width: 15%;
height: 15%;
float: right;
}