Что мешает моей форме?

Question

Я создал форму в кодефене, и как только я был доволен ею, я ввел свои html и css для своего баннера и навигатора, но теперь что-то мешает моей форме. Может кто-то указать мне, что я могу сделать, чтобы моя форма вернулась в прежнее состояние.

Вот код для моей формы без информации о баннерах и навигациях.

HTML:

<!-- Form End --> 
    <div class="form-share"> 
<form action="/my-handling-form-page" method="post"> 
<div> 
     <label for="name">Name:</label> 
     <input type="text" id="name" name="user_name" placeholder="Your Name"/> 
    </div> 
    <div> 
     <label for="mail">E-mail:</label> 
     <input type="email" id="mail" name="user_mail" placeholder="email@gmail.com"/> 

    </div> 
    <div> 
     <label for="msg">Message:</label> 
     <textarea id="msg" name="user_message" placeholder="Tell us about your story!"></textarea> 
    </div> 

    <div class="button"> 
     <button type="submit">Send your message</button> 
    </div> 
</form> 

    </div> <!-- Form End --> 

CSS:

.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 & 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; 
} 

и вот код для моей страницы с формой, знаменами и нав.

Html:

<div class="container"> 
<header> 
    <!--<img class="banner" src="images/banner2.png"> --> 
    <img class="banner" src="https://s16.postimg.org/d1ma252ol/banner2.png"> 
<!-- <div class="gender"> 
    <h3> Gender Identity </h3> 
    </div> --> 
</header> 

<div id="wrap"> 

<div id="tabwrap"> 
    <ul id="tabs"> 
    <li > 
    <a href="#terms" class="cyan"> Information </a> 
    </li> 

    <li> 
    <a href="#resources" class="green">Resources</a> 
    </li> 

    <li> 
    <a href="#culture" class="lav">Media</a> 
    </li> 

    <li> 
     <a href="#share" class="teal">Share</a> 
    </li> 

    </ul> 

    <div id="content"> 
    <div id="terms" class="animated"> <p>Understanding Gender identities and Sexual Orientation. Find out more about terms and misconceptions. </p></div> 
    <div id="resources" class="animated"><p>Access information providing links and other sources for those looking to reach out to others or simply learn more about gender Identitiy and orientation. </p></div> 
    <div id="culture" class="animated"><p> Examples of books, television, movie and other media that bring light to the topic of gender idenitity and sexual orientation. </p></div> 
    <div id="share" class="animated"> <p>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! </p> 
    </div> <!-- End of Div--> 
    </div> <!-- End of Div--> 
    </div><!-- End of Div--> 


    <!-- Form End --> 
    <div class="form-share"> 
<form action="/my-handling-form-page" method="post"> 
<div> 
     <label for="name">Name:</label> 
     <input type="text" id="name" name="user_name" placeholder="Your Name"/> 
    </div> 
    <div> 
     <label for="mail">E-mail:</label> 
     <input type="email" id="mail" name="user_mail" placeholder="email@gmail.com"/> 

    </div> 
    <div> 
     <label for="msg">Message:</label> 
     <textarea id="msg" name="user_message" placeholder="Tell us about your story!"></textarea> 
    </div> 

    <div class="button"> 
     <button type="submit">Send your message</button> 
    </div> 
</form> 

    </div> <!-- Form End --> 

    <hr> 
<footer class="info"> 
    <a href="#"> Home</a> | 
    <a href="index-terms.html"> Terms </a> | <a href="#">Media</a> | <a href="#">Resources </a> | <a href="#">Share</a> 

    <p class="last-home"> | 2016 | Web Design</p> 
</footer> 

    </div> 
    </div> 

CSS:

@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 > 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; 
} 

JS:

$('#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'); 
}); 

Answer 1

Чтобы выровнять имя и метку, которую вы можете попробовать добавить тип отображения inline-block к вашему и также укажите width. Например:

.form-share label { 
    display: inline-block; 
    width: 75px; 
    text-align: right; 
} 

https://jsfiddle.net/duxprgua/1/

Но я бы, вероятно, рекомендую использовать что-то вроде bootstrap и это сделает вашу жизнь намного проще: https://jsfiddle.net/0k7nd6oh/2/