我的网站上有额外的空间，我试图摆脱它。关于我需要在CSS中编辑什么的想法摆脱这个？我使用了html5up的Overflow主题。我摆脱了页面的画廊部分，所以也许这就是为什么我有额外的空间？这是我的第一个付费项目，所以我非常渴望得到这份工作！
非常感谢任何帮助！
/* 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>© 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>
答案 0 :(得分：1)
从您的实时版本中，删除<section id="header"></section>中的填充并生成
#header {
padding: 3em 0 9em 0;
}