title: How To Center Navigation Bar And Position Atop Bottom Section of Banner Image
body: <p>Just a forewarning, I am new to HTML and CSS.  Please be patient with my inquiry here.</p>
  
  <p>I am attempting to center the navigation bar while overlapping it on the bottom side of the banner.  I have a banner image at the top and a background image for the main content which is positioned just below the nav bar.  I've attempted to add the following:</p>
  
  <pre><code>ul.navbar li {
   float: left}
  </code></pre>
  
  <p>This floated the nav bar directly underneath the main body background instead of above everything. In order to get the list in a horizontal format i used</p>
  
  <pre><code>ul.navbar li {
   display: inline-table}
  </code></pre>
  
  <p>This was the only variation that would give me the correct horizontal format I was looking for.  Now I just need it centered and overlaid on the bottom end of my banner image.  Any suggestions?  My HTML and CSS is as follows:</p>
  
  <p>CSS:</p>
  
  <pre><code>body {
  
  padding-left: 9em;
  
  font-family: Georgia, "Times New Roman", Times, serif;
  
  color: #6699FF;
  
  background-color: white 
  
  }
  
  div#contentareamain1 {
  
  background: url(contentareamain1.png) no-repeat;
  
  background-color: white;
  
  color: white;
  
  height: 634px;
  
  position: relative;
  
  }
  
  div#contentareamain1text {
  
  position: relative;
  
  height: auto;
  
  width: 700px;
  
  left: 5em;
  
  top: 4em;
  
  }
  
  #header {
  
  float:left;
  
  width:100%;
  
  height:87px;
  
  }
  
  .wrap {
  
  position:relative;
  
  margin:0 ;
  
  }
  
  ul.navbar {
  
  list-style-type: none;
  
  padding: 0.3em;
  
  margin: 0;
  
  top: 2em;
  
  left: 5em;
  
  width: 15em;
  
  }
  
  h1 {
  
  font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif 
  
  }
  
  ul.navbar li {
  
  background: rgb(157,193,255);
  
  margin: 0.5em ;
  
  padding: 0.3em;
  
  border-bottom: 1em solid black; 
  
  text-align: center;
  
  display: inline-table;
  
  }
  
  ul.navbar a:hover {
  
  color: blue;
  
  background-color: #00FFFF;
  
  }
  
  ul.navbar a {
  
  text-decoration: none;
  
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;body&gt;
  
  &lt;div id="header"&gt;
  
  &lt;div class="wrap"&gt;
  
  &lt;img src="banner.png"/&gt;
  
  &lt;/div&gt;&lt;ul class="navbar"&gt;
  
  &lt;p&gt; &lt;li&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt; &lt;/p&gt;
  
  &lt;p&gt; &lt;li&gt;&lt;a href="services.html"&gt;Services&lt;/a&gt; &lt;/p&gt;
  
  &lt;p&gt; &lt;li&gt;&lt;a href="inspireme.html"&gt;Training&lt;/a&gt; &lt;/p&gt;
  
  &lt;/ul&gt;
  
  &lt;div id="contentareamain1" no-repeat&gt;
  
  &lt;div id="contentareamain1text"&gt;&lt;p&gt;
  
  &lt;/p&gt;&lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>Thank you so much in advance!</p>