title: I am trying to bulid this webpage with HTML and CSS but the layout is completely messed up dont know why
body: <p>Below is the my complete code, the layout I am try is to get a navbar at the top with all the content in the center with a text box field and footer at the bottom </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    margin: 0px;
    padding: 0px;
  }
  .navbar {
    position: relative;
    border-bottom: 1px solid #8F8780;
    padding-top: 0px;
    margin-top: 0px;
    top: 0px;
    background-color: #FF6600;
  }
  .navbar li {
    display: inline;
    list-style: none;
    padding: 20px;
  }
  .navbar li a {
    text-decoration: none;
    float: right;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 7px;
    font-family: 'Bitter', sans-serif;
    color: black;
    font-size: 15px;
  }
  .jumbotron {
    clear: both;
    padding: 50px;
    position: relative;
    background-color: #66CCFF;
    margin-bottom: 0px;
  }
  .jumbotron input {
    border: solid 1px #E5E5E5;
    background: transparent;
    border: 1px solid;
    padding: 2px;
    border-radius: 10px;
  }
  .jumbotron input:hover,
  input:focus {
    border-color: #C9C9C9;
  }
  #submit {
    border: 2px solid #33CC33;
    background: transparent;
    font-family: 'Actor', san-serif;
    -webkit-border-radius: 10px;
    color: #33CC33;
  }
  #submit:hover {
    background: #66FF66;
    color: white;
  }
  .footer {
    margin: 0px;
    position: fixed;
    border-top: 1px solid #8F8780;
    padding: 15px;
    text-align: center;
    bottom: 0px;
    width: 100%;
    background-color: #9A938D;
  }
  .footer a {
    font-family: 'Pacifico', cursive;
    text-decoration: none;
    color: black;
  }
  .footer p {
    font-family: 'Actor', san-serif;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="parent"&gt;
    &lt;div class="navbar"&gt;
      &lt;div class="container"&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;Login&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Sign Up&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="jumbotron"&gt;
      &lt;div class="container"&gt;
        &lt;form&gt;
          &lt;input type=text name="search" id="search" value="Enter the locality" /&gt;
          &lt;input type="submit" id="submit" /&gt;
        &lt;/form&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="footer"&gt;
      &lt;div class="container"&gt;
        &lt;a href="#"&gt;Terms &amp; Conditions&lt;/a&gt; |
        &lt;a href="#"&gt;Privacy Policy&lt;/a&gt;
        &lt;p&gt;Copyright &amp;copy 2015 Hotel Depot. All rights reserved&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>below is the link for jsfiddle</p>
  
  <p><a href="http://jsfiddle.net/AzLQY/" rel="nofollow">http://jsfiddle.net/AzLQY/</a></p>