title: What is interfering with my form?
body: <p>I created a form in codepen and once I was satisfied with it, I entered in my html and css for my banner and nav, but something is now interfering with my form. Can someone point out to me what I can do get my form to return to it's previous state.</p>
  
  <p>Here is the code for my form without the banner and nav information. </p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!-- Form End --&gt;
    &lt;div class="form-share"&gt;
  &lt;form action="/my-handling-form-page" method="post"&gt;
  &lt;div&gt;
          &lt;label for="name"&gt;Name:&lt;/label&gt;
          &lt;input type="text" id="name" name="user_name" placeholder="Your Name"/&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;label for="mail"&gt;E-mail:&lt;/label&gt;
          &lt;input type="email" id="mail" name="user_mail" placeholder="email@gmail.com"/&gt;
  
      &lt;/div&gt;
      &lt;div&gt;
          &lt;label for="msg"&gt;Message:&lt;/label&gt;
          &lt;textarea id="msg" name="user_message" placeholder="Tell us about your story!"&gt;&lt;/textarea&gt;
      &lt;/div&gt;
  
       &lt;div class="button"&gt;
          &lt;button type="submit"&gt;Send your message&lt;/button&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  
    &lt;/div&gt; &lt;!-- Form End --&gt;
  </code></pre>
  
  <p>CSS: </p>
  
  <pre><code>.form-share {
    margin-top: 50px;
    margin-bottom: 50px;
  }
  
  form {
      /* Just to center the form on the page */
      margin: 0 auto;
      width: 400px;
      /* To see the outline of the form */
      padding: 1em;
      border: 1px solid #CCC;
      border-radius: 1em;
  }
  
  form div + div {
      margin-top: 1em;
  }
  
  label {
      /* To make sure that all labels have the same size and are properly aligned */
      display: inline-block;
      width:  77px;
      text-align: right;
  }
  
  input, textarea {
      /* To make sure that all text fields have the same font settings
         By default, textareas have a monospace font */
      font: 1em sans-serif;
  
      /* To give the same size to all text field */
      width: 300px;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
  
      /* To harmonize the look &amp; feel of text field border */
      border: 1px solid #999;
  }
  
  input:focus, textarea:focus {
      /* To give a little highlight on active elements */
      border-color: #000;
  }
  
  textarea {
      /* To properly align multiline text fields with their labels */
      vertical-align: top;
  
      /* To give enough room to type some text */
      height: 5em;
  
      /* To allow users to resize any textarea vertically
         It does not work on all browsers */
      resize: vertical;
  }
  
  .button {
   /*margin: 0 auto;*/
    padding-left: 77px;
    padding-right: 16px;
  }
  
  button[type=submit] {
   -webkit-appearance: none; 
   -moz-appearance: none;
   display: block;
   margin: 1.5em 0;
   font-size: 1em; 
   line-height: 2.5em;
   color: #333;
   font-weight: bold;
   height: 2.5em; 
   width: 100%;
   background: -moz-linear-gradient(top, rgb(204,233,250) 0%, rgb(214,119,126) 100%); 
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(204,233,250)), color-stop(100%,rgb(214,119,126))); 
  
   -webkit-border-radius: 10px; 
    -moz-border-radius: 10px; border-radius: 10px;
  }
  
  button:hover {
    cursor: pointer;
  }
  </code></pre>
  
  <p>and Here is the Code for my page with the form, the banner and the nav.</p>
  
  <p>Html: </p>
  
  <pre><code>&lt;div class="container"&gt;
  &lt;header&gt; 
    &lt;!--&lt;img class="banner"  src="images/banner2.png"&gt; --&gt;
    &lt;img class="banner"  src="https://s16.postimg.org/d1ma252ol/banner2.png"&gt;
   &lt;!-- &lt;div class="gender"&gt;
      &lt;h3&gt; Gender Identity &lt;/h3&gt;
    &lt;/div&gt; --&gt;
  &lt;/header&gt;
  
  &lt;div id="wrap"&gt; 
  
   &lt;div id="tabwrap"&gt; 
    &lt;ul id="tabs"&gt;
     &lt;li &gt;
       &lt;a href="#terms" class="cyan"&gt; Information &lt;/a&gt;
     &lt;/li&gt;
  
      &lt;li&gt;
       &lt;a href="#resources" class="green"&gt;Resources&lt;/a&gt;
      &lt;/li&gt; 
  
     &lt;li&gt;
       &lt;a href="#culture" class="lav"&gt;Media&lt;/a&gt;
      &lt;/li&gt; 
  
      &lt;li&gt;
        &lt;a href="#share" class="teal"&gt;Share&lt;/a&gt;
      &lt;/li&gt;
  
    &lt;/ul&gt; 
  
    &lt;div id="content"&gt; 
      &lt;div id="terms" class="animated"&gt; &lt;p&gt;Understanding Gender identities and Sexual Orientation.  Find out more about terms and misconceptions. &lt;/p&gt;&lt;/div&gt;
      &lt;div id="resources" class="animated"&gt;&lt;p&gt;Access information providing links and other sources for those looking to reach out to others or simply learn more about gender Identitiy and orientation. &lt;/p&gt;&lt;/div&gt;
      &lt;div id="culture" class="animated"&gt;&lt;p&gt; Examples of books,  television, movie and other media that bring light to the topic of gender idenitity and sexual orientation. &lt;/p&gt;&lt;/div&gt;
      &lt;div id="share" class="animated"&gt; &lt;p&gt;Share any stories you may have, whether it be about your own experience with your gender or sexuality, or from the perspective of an allie, questions you may have, or other resources that could be useful for other! &lt;/p&gt; 
      &lt;/div&gt; &lt;!-- End of Div--&gt;
     &lt;/div&gt; &lt;!-- End of Div--&gt;
    &lt;/div&gt;&lt;!-- End of Div--&gt;
  
  
    &lt;!-- Form End --&gt;
    &lt;div class="form-share"&gt;
  &lt;form action="/my-handling-form-page" method="post"&gt;
  &lt;div&gt;
          &lt;label for="name"&gt;Name:&lt;/label&gt;
          &lt;input type="text" id="name" name="user_name" placeholder="Your Name"/&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;label for="mail"&gt;E-mail:&lt;/label&gt;
          &lt;input type="email" id="mail" name="user_mail" placeholder="email@gmail.com"/&gt;
  
      &lt;/div&gt;
      &lt;div&gt;
          &lt;label for="msg"&gt;Message:&lt;/label&gt;
          &lt;textarea id="msg" name="user_message" placeholder="Tell us about your story!"&gt;&lt;/textarea&gt;
      &lt;/div&gt;
  
       &lt;div class="button"&gt;
          &lt;button type="submit"&gt;Send your message&lt;/button&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  
    &lt;/div&gt; &lt;!-- Form End --&gt;
  
    &lt;hr&gt;
  &lt;footer class="info"&gt;
    &lt;a href="#"&gt; Home&lt;/a&gt; | 
    &lt;a href="index-terms.html"&gt; Terms &lt;/a&gt; | &lt;a href="#"&gt;Media&lt;/a&gt; | &lt;a href="#"&gt;Resources &lt;/a&gt; | &lt;a href="#"&gt;Share&lt;/a&gt;
  
    &lt;p class="last-home"&gt;  | 2016 | Web Design&lt;/p&gt;
  &lt;/footer&gt;
  
    &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>CSS: </p>
  
  <pre><code>@font-face { font-family: "aqua"; 
    src: url('aqua.ttf'); } 
  @font-face { font-family: "axis"; 
    src: url('Axis Extrabold.otf'); } 
  @font-face { font-family: "atami"; 
    src: url('Atami-Regular.otf'); } 
  
  .container {
    width: 100%;
    margin: 0 auto;
  }
  
  .banner{
    display: block;
  margin: 0 auto;
    width: 100%;
    min-width: 400px;
    /*margin-bottom: 40px;*/
  }
  
  #content {
    position: absolute;
    z-index: 1;
    width: 100%;
  }
  
  .gender {
    padding-top: 20px;
    padding-bottom: 20px;
   /* background-color: black; */
    margin-bottom: 20px;
  }
  .gender h3{
  text-align: center;
   color: rgb(0,0,0); /* white*/
    animation: rgb infinite alternate;
    animation-duration: 15s;
    font-size: 2em;
  }
  
  @keyframes rgb {
    /* 0% will fallback to the default background-color of #rgb*/
   50% {color: rgb(29,185,226); /*blue*/ }
    75% {color: rgb(105,45,138); /*purple*/ }
    100% {color: rgb(237,49,147); /*pink*/}
  }
  
  h3{
  font-family: "axis", sans-serif;
  }
  
  
  h1{
  font-family: 'Poppins', sans-serif;
  font-size: 2.5rem;
  }
  
  .content-info {
    margin-top: 20px;
    text-align: center;
    display: block;
  }
  
  * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;  margin: 0; padding: 0; }
  
  #wrap { width: 100%; margin: 0 auto; min-width: 300px; max-width: 2000px; 
  }
  
  #tabwrap {
      /*background: #fff;*/
      overflow: hidden;
      width: 100%;
    max-height:  10rem;
      /*min-height: 300px;*/
      margin: 0 auto;
    background-color: black /*rgb(255,204,254)*/;
      /*box-shadow: 0 0 20px #ddd;*/
      /*border: 1px solid #ddd;*/
  }
  #tabs { overflow: hidden;  }
  #tabs li { list-style: none;
             font-family: "axis", sans-serif; }
  
  #tabs li a {
      float: left;
      display: block;
      padding: 10px;
      color: white;
      width: 25%;
      text-decoration: none;
      text-align: center;
  
      border-left: 1px solid #888;
      font-size: 15px;
    font-family: 'Montserrat', sans-serif;
  }
  
  #tabs li a:hover { background: #666; }
  #tabs li:first-child a { border-left: 0; }
  #tabs li:last-child a { border-right: 0; }
  
  #tabs li.current a {
      background: #fff;
      color: #666;
  
  }
  
  #tabs li.current a.cyan{
      background: rgb(245,166,200); /*pink*/
      color: white;
  }
  
  #tabs li.current a.green{
  background-color: rgb(164,206,249); /*blue*/
      color: white;
  }
  
  #tabs li.current a.lav{
   background-color: rgb(200,200,255);
      color: white;
  }
  
  
  #tabs li.current a.teal{
   background-color: rgb(163,109,174);
      color: white;
  }
  
  
  
  #content &gt; div {
      clear: both;
      padding: 20px;
      line-height: 19px;
      color: white;
      display: none;
  font-family: "aqua", sans-serif;
    text-align: center;
  
  }
  .animated {
      -webkit-animation-duration: 1s;
         -moz-animation-duration: 1s;
           -o-animation-duration: 1s;
              animation-duration: 2s;
  }
  
  #content .current { display: block }
  #content p { /*margin: 0 0 20px 0;*/
    z-index: 1;
  }
  
  @-webkit-keyframes fadeInLeft {
    0% {
      opacity: 0;
      -webkit-transform: translateX(-10px);
      transform: translateX(-10px);
    }
  
    100% {
      opacity: 1;
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }
  }
  
  @keyframes fadeInLeft {
    0% {
      opacity: 0;
      -webkit-transform: translateX(-10px);
      -ms-transform: translateX(-10px);
      transform: translateX(-10px);
    }
  
    100% {
      opacity: 1;
      -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
      transform: translateX(0);
    }
  }
  
  .fadeInLeft {
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
  }
  
  #terms {
    background-color: rgb(245,166,200); /*pink*/
  }
  
  #resources {
    background-color: rgb(164,206,249); /*blue*/
  }
  
  #culture{
      background-color: rgb(200,200,255);
  }
  
  #share {
      background-color: rgb(163,109,174);
      z-index: 1;
  }
  
  .main-caro img{
    display:block;
    margin: 0 auto;
    padding-bottom: 10px;
  }
  
  /* Delete this 
  ------------------------------------------------ */
  body {
    background: white;
    padding: 0;
    }  
  footer.info { text-align: center; color: #888; margin: 30px 0; }
  footer.info p { color: black; }
  
  .last-home {
  padding-top: 10px;
  }
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$('#tabs li a').hover(function(e) {
      $('#tabs li, #content .current').removeClass('current').removeClass('fadeInLeft'); 
      $(this).parent().addClass('current');
      var currentTab = $(this).attr('href');
      $(currentTab).addClass('current fadeInLeft');
      e.preventDefault();
  
  }, function(){
     $('#tabs li, #content .current').removeClass('current').removeClass('fadeInLeft');
  });
  </code></pre>