I have a lowerbody div with an image in it but it will not center itself. I have tried mulitple different ways but nothing has worked. I know I probably just have the coding in the CSS wrong but I just cant figure it out. Im new to this and Im trying to trouble shoot on my own to learn but this one has me confused. Ant 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;
    left:0;
    right:0;
    margin-left: auto;
    margin-right: auto;
    postion: relative;
    display:block;
}
#lowerbody img {
    position:relative;
    border-radius: 5px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}
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;
}

```