网站上方的额外空间

Question

I have extra space on top of my website that I'm trying to get rid of. Any ideas on what I need to edit in CSS to get rid of this? I'm using the Overflow theme from html5up. I got rid of the gallery section of the page, so maybe this is why I have the extra space? This is my first payed project, so I'm very anxious to get this job correct!

Any help would be greatly appreciated!

 /* Basic */ body { background-color: #183026; background-image: url("images/overlay.png"), url("../../images/bg.jpg"); background-repeat: repeat, no-repeat; background-size: auto, cover; background-position: top left, center 0; background-attachment: fixed, fixed; font-family: 'Source Sans Pro', sans-serif; font-size: 18pt; line-height: 1.75em; font-weight: 300; letter-spacing: 1px; color: #3a3939; text-shadow: 0 0 0.5px rgba(58, 57, 57, 0.25); -webkit-text-stroke: 0.25px; } body.is-scroll { background-attachment: scroll, scroll; background-size: auto, 100% auto; } body.is-loading * { -moz-transition: none !important; -webkit-transition: none !important; -ms-transition: none !important; transition: none !important; -moz-animation: none !important; -webkit-animation: none !important; -ms-animation: none !important; animation: none !important; } input, textarea, select { font-family: 'Source Sans Pro', sans-serif; font-size: 18pt; line-height: 1.75em; font-weight: 300; letter-spacing: 1px; color: #3a3939; text-shadow: 0 0 0.5px rgba(58, 57, 57, 0.25); -webkit-text-stroke: 0.25px; } h1, h2, h3, h4, h5, h6 { font-weight: 400; text-transform: uppercase; line-height: 1.75em; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: inherit; text-decoration: none; } h2 { font-size: 1.25em; letter-spacing: 8px; } h3 { font-size: 1em; letter-spacing: 5px; } strong, b { font-weight: 400; } em, i { font-style: italic; } a { -moz-transition: border-color 0.35s ease-in-out, color 0.35s ease-in-out; -webkit-transition: border-color 0.35s ease-in-out, color 0.35s ease-in-out; -ms-transition: border-color 0.35s ease-in-out, color 0.35s ease-in-out; transition: border-color 0.35s ease-in-out, color 0.35s ease-in-out; color: #35b88f; text-shadow: 0 0 0.5px rgba(53, 184, 143, 0.25); text-decoration: none; border-bottom: dotted 1px rgba(53, 184, 143, 0.5); } a:hover { border-bottom-color: rgba(53, 184, 143, 0); } sub { position: relative; top: 0.5em; font-size: 0.8em; } sup { position: relative; top: -0.5em; font-size: 0.8em; } hr { border: 0; border-top: solid 1px #dad9d9; margin: 2em 0 2em 0; } blockquote { border-left: solid 0.5em #eae9e9; padding: 1em 0 1em 2em; font-style: italic; } p, ul, ol, dl, table { margin-bottom: 1em; } header { margin-bottom: 1em; } header p { display: block; margin: 0.5em 0 0 0; padding: 0 0 1.5em 0; } footer { margin-top: 1em; } br.clear { clear: both; } /* Sections/Article */ section, article { margin-bottom: 3em; } section > :last-child, article > :last-child, section:last-child, article:last-child { margin-bottom: 0; } .row > section, .row > article { margin-bottom: 0; } /* Image */ .image { display: inline-block; border: 0; } .image img { display: block; width: 100%; } .image.featured { display: block; width: 100%; margin: 0 0 2em 0; } .image.fit { display: block; width: 100%; } .image.left { float: left; margin: 0 2em 2em 0; } .image.centered { display: block; margin: 0 0 2em 0; } .image.centered img { margin: 0 auto; width: auto; } /* List */ ul.default { list-style: disc; padding-left: 1em; } ul.default li { padding-left: 1.5em; margin-top: 1.5em; } ul.default li:first-child { margin-top: 0; } ul.icons { cursor: default; } ul.icons li { display: inline-block; } ul.icons a { display: inline-block; width: 2.5em; height: 2.5em; line-height: 2.5em; text-align: center; border: 0; } ul.menu { cursor: default; } ul.menu li { display: inline-block; line-height: 1em; border-left: solid 1px #dad9d9; padding: 0 0 0 0.5em; margin: 0 0 0 0.5em; } ul.menu li:first-child { border-left: 0; padding-left: 0; margin-left: 0; } ul.actions { cursor: default; } ul.actions li { display: inline-block; margin: 0 0 0 0.5em; } ul.actions li:first-child { margin-left: 0; } ol.default { list-style: decimal; padding-left: 1.25em; } ol.default li { padding-left: 1.25em; margin-top: 1.5em; } /* Banner */ #banner { position: relative; color: #fff; text-shadow: 0 0 0.5px rgba(255, 255, 255, 0.25); text-align: center; background: #35b88f url("images/banner.svg") bottom center no-repeat; padding: 5em 0 5em 0; margin: 0; background-size: 125% auto; } #banner .button { color: #35b882; text-shadow: 0 0 0.5px rgba(53, 184, 130, 0.25); } #banner header { margin: 0 0 2em 0; } #banner header h2 { font-weight: 400; font-size: 1.75em; letter-spacing: 8px; } #banner p { margin: 0; } #banner footer { margin: 2em 0 0 0; } #banner a { color: inherit; border-bottom-color: rgba(255, 255, 255, 0.5); } #banner a:hover { border-bottom-color: rgba(255, 255, 255, 0); } /* Footer */ #footer { position: relative; color: #fff; text-shadow: 0 0 0.5px rgba(255, 255, 255, 0.25); text-align: center; margin: 4.5em 0 0 0; } #footer:after { content: ''; display: block; position: absolute; top: -4.5em; left: 50%; height: 4.5em; border-left: solid 1px #fff; } #footer a { color: #fff; text-shadow: 0 0 0.5px rgba(255, 255, 255, 0.25); border-bottom-color: rgba(255, 255, 255, 0.5); } #footer a:hover { color: #35b88f; text-shadow: 0 0 0.5px rgba(69, 200, 159, 0.25); border-bottom-color: rgba(53, 184, 143, 0.5); } #footer .icons { padding: 0.75em 2em 0.75em 2em; border-radius: 3em; border: solid 1px #fff; display: inline-block; margin: 0 0 3em 0; } #footer .copyright { margin: 0 0 9em 0; font-size: 0.8em; } /* Header */ #header { padding: 6em 0 6em 0; } #header header { padding-left: 2em; padding-right: 2em; } #header header h1 { font-size: 1.75em; letter-spacing: 6px; } #header footer { bottom: 4.5em; padding: 0 2em 0 2em; } #header footer:after { bottom: -4.5em; left: 50%; height: 4.5em; } #header footer:before { width: 45px; height: 33px; bottom: -2.25em; margin-left: -22.5px; margin-bottom: -16.5px; background-size: 45px 33px; } /* Banner */ #banner { padding: 3em 2em 3em 2em; background-size: auto 150%; } #banner header { margin: 0 0 1em 0; } #banner header h2 { font-size: 1.5em; letter-spacing: 6px; } /* Footer */ #footer .icons { padding: 0.5em 1.25em 0.5em 1.25em; } #footer .copyright { font-size: 1em; margin: 0 0 4em 0; } /* Poptrox */ .poptrox-popup .nav-next, .poptrox-popup .nav-previous { opacity: 1.0; } .poptrox-popup .nav-next:before, .poptrox-popup .nav-previous:before { display: none; } .poptrox-popup .closer { opacity: 0.5; } } 

 <!DOCTYPE HTML> <!-- Overflow by HTML5 UP html5up.net | @ajlkn Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) --> <html> <head> <title>The Sunbelt Group</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <!--[if lte IE 8]><script src="assets/js/ie/html5shiv.js"></script><![endif]--> <link rel="stylesheet" href="assets/css/main.css" /> <!--[if lte IE 8]> <link rel="stylesheet" href="assets/css/ie8.css" /> <![endif]--> <!-- webform.pw --> <!-- webform.pw <script> web_form_id = "a9771519-bb14-453d-b997-26d751bc3e79" </script> <script type="text/javascript" src="https://webform.pw/client/formclient.nocache.js"> </script> --> </head> <body> <!-- Header --> <section id="header"> <header> <h1><img src="images/sunbeltgrouplogo.png" alt="" /></h1> </header> <footer> <a href="#banner" class="button style2 scrolly-middle">About Us</a> </footer> </section> <!-- Banner --> <section id="banner"> <header> <h2>Who We Are</h2> </header> <p>The Sunbelt Group is an online business marketer. <br />Our mission: maximize your exposure on the Internet. <br />We work to put your business in front of the greatest number of prospects as possible.</p> <footer> <a href="#first" class="button style2 scrolly">Our Services</a> </footer> </section> <!-- Feature 1 --> <article id="first" class="container box style1 right"> <a href="#" class="image fit"><img src="images/strategyimg.jpg" alt="" /></a> <div class="inner"> <header> <h2>Strategic Advertising</h2> </header> <!-- Feature 1 --> <p>Tortor faucibus ullamcorper nec tempus purus sed penatibus. Lacinia pellentesque eleifend vitae est elit tristique velit tempus etiam.</p> </div> </article> <!-- Feature 2 --> <article class="container box style1 left"> <a href="#" class="image fit"><img src="images/targetmarketimg3bw.jpg" alt="" /></a> <div class="inner"> <header> <h2>Targeted Exposure</h2> </header> <p>Rhoncus mattis egestas sed fusce sodales rutrum et etiam ullamcorper. Etiam egestas scelerisque ac duis magna lorem ipsum dolor.</p> </div> </article> <!-- Feature 3 --> <article id="first" class="container box style1 right"> <a href="#" class="image fit"><img src="images/dedicatedsupport.jpg" alt="" /></a> <div class="inner"> <header> <h2>Dedicated Support</h2> </header> <p>Tortor faucibus ullamcorper nec tempus purus sed penatibus. Lacinia pellentesque eleifend vitae est elit tristique velit tempus etiam.</p> </div> </article> <!-- Contact --> <article class="container box style3"> <header> <h2>Connect With Us</h2> <p>tom.miyata@outlook.com <br /> (312) 391-3910 </p> </header> <form method="post" action="https://formspree.io/tgkwebservices@gmail.com"> <div class="row 50%"> <div class="6u 12u$(mobile)"><input type="text" class="text" name="name" placeholder="Name" /></div> <div class="6u$ 12u$(mobile)"><input type="text" class="text" name="email" placeholder="Email" /></div> <div class="12u$"> <textarea name="message" placeholder="Message"></textarea> </div> <div class="12u$"> <ul class="actions"> <li><input type="submit" value="Send Message" /></li> </ul> </div> </div> </form> </article> <!-- Generic --> <!-- <article class="container box style3"> <header> <h2>Generic Box</h2> <p>Just a generic box. Nothing to see here.</p> </header> <section> <header> <h3>Paragraph</h3> <p>This is a subtitle</p> </header> <p>Phasellus nisl nisl, varius id <sup>porttitor sed pellentesque</sup> ac orci. Pellentesque habitant <strong>strong</strong> tristique <b>bold</b> et netus <i>italic</i> malesuada <em>emphasized</em> ac turpis egestas. Morbi leo suscipit ut. Praesent <sub>id turpis vitae</sub> turpis pretium ultricies. Vestibulum sit amet risus elit.</p> </section> <section> <header> <h3>Blockquote</h3> </header> <blockquote>Fringilla nisl. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus.</blockquote> </section> <section> <header> <h3>Divider</h3> </header> <p>Donec consectetur <a href="#">vestibulum dolor et pulvinar</a>. Etiam vel felis enim, at viverra ligula. Ut porttitor sagittis lorem, quis eleifend nisi ornare vel. Praesent nec orci facilisis leo magna. Cras sit amet urna eros, id egestas urna. Quisque aliquam tempus euismod. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia.</p> <hr /> <p>Donec consectetur vestibulum dolor et pulvinar. Etiam vel felis enim, at viverra ligula. Ut porttitor sagittis lorem, quis eleifend nisi ornare vel. Praesent nec orci facilisis leo magna. Cras sit amet urna eros, id egestas urna. Quisque aliquam tempus euismod. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia.</p> </section> <section> <header> <h3>Unordered List</h3> </header> <ul class="default"> <li>Donec consectetur vestibulum dolor et pulvinar. Etiam vel felis enim, at viverra ligula. Ut porttitor sagittis lorem, quis eleifend nisi ornare vel.</li> <li>Donec consectetur vestibulum dolor et pulvinar. Etiam vel felis enim, at viverra ligula. Ut porttitor sagittis lorem, quis eleifend nisi ornare vel.</li> <li>Donec consectetur vestibulum dolor et pulvinar. Etiam vel felis enim, at viverra ligula. Ut porttitor sagittis lorem, quis eleifend nisi ornare vel.</li> <li>Donec consectetur vestibulum dolor et pulvinar. Etiam vel felis enim, at viverra ligula. Ut porttitor sagittis lorem, quis eleifend nisi ornare vel.</li> </ul> </section> <section> <header> <h3>Ordered List</h3> </header> <ol class="default"> <li>Donec consectetur vestibulum dolor et pulvinar. Etiam vel felis enim, at viverra ligula. Ut porttitor sagittis lorem, quis eleifend nisi ornare vel.</li> <li>Donec consectetur vestibulum dolor et pulvinar. Etiam vel felis enim, at viverra ligula. Ut porttitor sagittis lorem, quis eleifend nisi ornare vel.</li> <li>Donec consectetur vestibulum dolor et pulvinar. Etiam vel felis enim, at viverra ligula. Ut porttitor sagittis lorem, quis eleifend nisi ornare vel.</li> <li>Donec consectetur vestibulum dolor et pulvinar. Etiam vel felis enim, at viverra ligula. Ut porttitor sagittis lorem, quis eleifend nisi ornare vel.</li> </ol> </section> <section> <header> <h3>Table</h3> </header> <div class="table-wrapper"> <table class="default"> <thead> <tr> <th>ID</th> <th>Name</th> <th>Description</th> <th>Price</th> </tr> </thead> <tbody> <tr> <td>45815</td> <td>Something</td> <td>Ut porttitor sagittis lorem quis nisi ornare.</td> <td>29.99</td> </tr> <tr> <td>24524</td> <td>Nothing</td> <td>Ut porttitor sagittis lorem quis nisi ornare.</td> <td>19.99</td> </tr> <tr> <td>45815</td> <td>Something</td> <td>Ut porttitor sagittis lorem quis nisi ornare.</td> <td>29.99</td> </tr> <tr> <td>24524</td> <td>Nothing</td> <td>Ut porttitor sagittis lorem quis nisi ornare.</td> <td>19.99</td> </tr> </tbody> <tfoot> <tr> <td colspan="3"></td> <td>100.00</td> </tr> </tfoot> </table> </div> </section> <section> <header> <h3>Form</h3> </header> <form method="post" action="#"> <div class="row"> <div class="6u"> <input class="text" type="text" name="name" id="name" value="" placeholder="John Doe" /> </div> <div class="6u"> <input class="text" type="text" name="email" id="email" value="" placeholder="johndoe@domain.tld" /> </div> </div> <div class="row"> <div class="12u"> <select name="department" id="department"> <option value="">Choose a department</option> <option value="1">Manufacturing</option> <option value="2">Administration</option> <option value="3">Support</option> </select> </div> </div> <div class="row"> <div class="12u"> <input class="text" type="text" name="subject" id="subject" value="" placeholder="Enter your subject" /> </div> </div> <div class="row"> <div class="12u"> <textarea name="message" id="message" placeholder="Enter your message"></textarea> </div> </div> <div class="row"> <div class="12u"> <ul class="actions"> <li><input type="submit" value="Submit" /></li> <li><input type="reset" class="style3" value="Clear Form" /></li> </ul> </div> </div> </form> </section> </article> --> <section id="footer"> <ul class="icons"> <li><a href="#" class="icon fa-twitter"><span class="label">Twitter</span></a></li> <li><a href="#" class="icon fa-facebook"><span class="label">Facebook</span></a></li> <li><a href="#" class="icon fa-google-plus"><span class="label">Google+</span></a></li> <li><a href="#" class="icon fa-pinterest"><span class="label">Pinterest</span></a></li> <li><a href="#" class="icon fa-dribbble"><span class="label">Dribbble</span></a></li> <li><a href="#" class="icon fa-linkedin"><span class="label">LinkedIn</span></a></li> </ul> <div class="copyright"> <ul class="menu"> <li>&copy; The Sunbelt Group. All rights reserved.</li> <li>Design: <a href="http://html5up.net">HTML5 UP</a></li> </ul> </div> </section> <!-- Scripts --> <script src="assets/js/jquery.min.js"></script> <script src="assets/js/jquery.scrolly.min.js"></script> <script src="assets/js/jquery.poptrox.min.js"></script> <script src="assets/js/skel.min.js"></script> <script src="assets/js/util.js"></script> <!--[if lte IE 8]><script src="assets/js/ie/respond.min.js"></script><![endif]--> <script src="assets/js/main.js"></script> </body> </html> 

Answer 1

From your live version, remove the padding from <section id="header"></section> and make

#header {
  padding: 3em 0 9em 0;
}