Was stört meine Form?

Question

Ich habe ein Formular in Codepen erstellt und sobald ich damit zufrieden war, habe ich in meinem HTML und CSS für mein Banner und Nav eingegeben, aber etwas stört jetzt mein Formular. Kann jemand auf mich hinweisen, was ich tun kann, um meine Form in den vorherigen Zustand zurückzubringen?

Hier ist der Code für mein Formular ohne die Banner- und Nav-Informationen.

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

und hier ist der Code für meine Seite mit dem Formular, das Banner und das nav.

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

Um den Namen ausrichten und beschriften Sie das Hinzufügen einer Anzeigetyp von inline-block versuchen möchten Ihre Etikett und auch eine width angeben. Z. B:

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

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

Aber ich würde wahrscheinlich empfehlen, so etwas wie bootstrap verwendet und es wird Ihr Leben viel einfacher zu machen: https://jsfiddle.net/0k7nd6oh/2/