0
私は取り除こうとしている私のウェブサイトの上に余分なスペースがあります。これを取り除くために私がCSSで編集する必要があるものについての任意のアイデア？私はhtml5upからOverflowテーマを使用しています。私はページのギャラリーセクションを取り除いたので、余分なスペースがあるのはなぜですか？これは私が最初に納得したプロジェクトなので、この仕事を正しくすることが非常に切望されています！余分なスペースは私のウェブサイトの上にある
ご協力いただければ幸いです！あなたのライブバージョンから
/* Basic */
\t body {
\t \t background-color: #183026;
\t \t background-image: url("images/overlay.png"), url("../../images/bg.jpg");
\t \t background-repeat: repeat, no-repeat;
\t \t background-size: auto, cover;
\t \t background-position: top left, center 0;
\t \t background-attachment: fixed, fixed;
\t \t font-family: 'Source Sans Pro', sans-serif;
\t \t font-size: 18pt;
\t \t line-height: 1.75em;
\t \t font-weight: 300;
\t \t letter-spacing: 1px;
\t \t color: #3a3939;
\t \t text-shadow: 0 0 0.5px rgba(58, 57, 57, 0.25);
\t \t -webkit-text-stroke: 0.25px;
\t }
\t \t body.is-scroll {
\t \t \t background-attachment: scroll, scroll;
\t \t \t background-size: auto, 100% auto;
\t \t }
\t \t body.is-loading * {
\t \t \t -moz-transition: none !important;
\t \t \t -webkit-transition: none !important;
\t \t \t -ms-transition: none !important;
\t \t \t transition: none !important;
\t \t \t -moz-animation: none !important;
\t \t \t -webkit-animation: none !important;
\t \t \t -ms-animation: none !important;
\t \t \t animation: none !important;
\t \t }
\t input, textarea, select {
\t \t font-family: 'Source Sans Pro', sans-serif;
\t \t font-size: 18pt;
\t \t line-height: 1.75em;
\t \t font-weight: 300;
\t \t letter-spacing: 1px;
\t \t color: #3a3939;
\t \t text-shadow: 0 0 0.5px rgba(58, 57, 57, 0.25);
\t \t -webkit-text-stroke: 0.25px;
\t }
\t h1, h2, h3, h4, h5, h6 {
\t \t font-weight: 400;
\t \t text-transform: uppercase;
\t \t line-height: 1.75em;
\t }
\t h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
\t \t color: inherit;
\t \t text-decoration: none;
\t }
\t h2 {
\t \t font-size: 1.25em;
\t \t letter-spacing: 8px;
\t }
\t h3 {
\t \t font-size: 1em;
\t \t letter-spacing: 5px;
\t }
\t strong, b {
\t \t font-weight: 400;
\t }
\t em, i {
\t \t font-style: italic;
\t }
\t a {
\t \t -moz-transition: border-color 0.35s ease-in-out, color 0.35s ease-in-out;
\t \t -webkit-transition: border-color 0.35s ease-in-out, color 0.35s ease-in-out;
\t \t -ms-transition: border-color 0.35s ease-in-out, color 0.35s ease-in-out;
\t \t transition: border-color 0.35s ease-in-out, color 0.35s ease-in-out;
\t \t color: #35b88f;
\t \t text-shadow: 0 0 0.5px rgba(53, 184, 143, 0.25);
\t \t text-decoration: none;
\t \t border-bottom: dotted 1px rgba(53, 184, 143, 0.5);
\t }
\t \t a:hover {
\t \t \t border-bottom-color: rgba(53, 184, 143, 0);
\t \t }
\t sub {
\t \t position: relative;
\t \t top: 0.5em;
\t \t font-size: 0.8em;
\t }
\t sup {
\t \t position: relative;
\t \t top: -0.5em;
\t \t font-size: 0.8em;
\t }
\t hr {
\t \t border: 0;
\t \t border-top: solid 1px #dad9d9;
\t \t margin: 2em 0 2em 0;
\t }
\t blockquote {
\t \t border-left: solid 0.5em #eae9e9;
\t \t padding: 1em 0 1em 2em;
\t \t font-style: italic;
\t }
\t p, ul, ol, dl, table {
\t \t margin-bottom: 1em;
\t }
\t header {
\t \t margin-bottom: 1em;
\t }
\t \t header p {
\t \t \t display: block;
\t \t \t margin: 0.5em 0 0 0;
\t \t \t padding: 0 0 1.5em 0;
\t \t }
\t footer {
\t \t margin-top: 1em;
\t }
\t br.clear {
\t \t clear: both;
\t }
/* Sections/Article */
\t section, article {
\t \t margin-bottom: 3em;
\t }
\t section > :last-child,
\t article > :last-child,
\t section:last-child,
\t article:last-child {
\t \t margin-bottom: 0;
\t }
\t .row > section, .row > article {
\t \t margin-bottom: 0;
\t }
/* Image */
\t .image {
\t \t display: inline-block;
\t \t border: 0;
\t }
\t \t .image img {
\t \t \t display: block;
\t \t \t width: 100%;
\t \t }
\t \t .image.featured {
\t \t \t display: block;
\t \t \t width: 100%;
\t \t \t margin: 0 0 2em 0;
\t \t }
\t \t .image.fit {
\t \t \t display: block;
\t \t \t width: 100%;
\t \t }
\t \t .image.left {
\t \t \t float: left;
\t \t \t margin: 0 2em 2em 0;
\t \t }
\t \t .image.centered {
\t \t \t display: block;
\t \t \t margin: 0 0 2em 0;
\t \t }
\t \t \t .image.centered img {
\t \t \t \t margin: 0 auto;
\t \t \t \t width: auto;
\t \t \t }
/* List */
\t ul.default {
\t \t list-style: disc;
\t \t padding-left: 1em;
\t }
\t \t ul.default li {
\t \t \t padding-left: 1.5em;
\t \t \t margin-top: 1.5em;
\t \t }
\t \t \t ul.default li:first-child {
\t \t \t \t margin-top: 0;
\t \t \t }
\t ul.icons {
\t \t cursor: default;
\t }
\t \t ul.icons li {
\t \t \t display: inline-block;
\t \t }
\t \t ul.icons a {
\t \t \t display: inline-block;
\t \t \t width: 2.5em;
\t \t \t height: 2.5em;
\t \t \t line-height: 2.5em;
\t \t \t text-align: center;
\t \t \t border: 0;
\t \t }
\t ul.menu {
\t \t cursor: default;
\t }
\t \t ul.menu li {
\t \t \t display: inline-block;
\t \t \t line-height: 1em;
\t \t \t border-left: solid 1px #dad9d9;
\t \t \t padding: 0 0 0 0.5em;
\t \t \t margin: 0 0 0 0.5em;
\t \t }
\t \t \t ul.menu li:first-child {
\t \t \t \t border-left: 0;
\t \t \t \t padding-left: 0;
\t \t \t \t margin-left: 0;
\t \t \t }
\t ul.actions {
\t \t cursor: default;
\t }
\t \t ul.actions li {
\t \t \t display: inline-block;
\t \t \t margin: 0 0 0 0.5em;
\t \t }
\t \t \t ul.actions li:first-child {
\t \t \t \t margin-left: 0;
\t \t \t }
\t ol.default {
\t \t list-style: decimal;
\t \t padding-left: 1.25em;
\t }
\t \t ol.default li {
\t \t \t padding-left: 1.25em;
\t \t \t margin-top: 1.5em;
\t \t }
/* Banner */
\t #banner {
\t \t position: relative;
\t \t color: #fff;
\t \t text-shadow: 0 0 0.5px rgba(255, 255, 255, 0.25);
\t \t text-align: center;
\t \t background: #35b88f url("images/banner.svg") bottom center no-repeat;
\t \t padding: 5em 0 5em 0;
\t \t margin: 0;
\t \t background-size: 125% auto;
\t }
\t \t #banner .button {
\t \t \t color: #35b882;
\t \t \t text-shadow: 0 0 0.5px rgba(53, 184, 130, 0.25);
\t \t }
\t \t #banner header {
\t \t \t margin: 0 0 2em 0;
\t \t }
\t \t \t #banner header h2 {
\t \t \t \t font-weight: 400;
\t \t \t \t font-size: 1.75em;
\t \t \t \t letter-spacing: 8px;
\t \t \t }
\t \t #banner p {
\t \t \t margin: 0;
\t \t }
\t \t #banner footer {
\t \t \t margin: 2em 0 0 0;
\t \t }
\t \t #banner a {
\t \t \t color: inherit;
\t \t \t border-bottom-color: rgba(255, 255, 255, 0.5);
\t \t }
\t \t \t #banner a:hover {
\t \t \t \t border-bottom-color: rgba(255, 255, 255, 0);
\t \t \t }
/* Footer */
\t #footer {
\t \t position: relative;
\t \t color: #fff;
\t \t text-shadow: 0 0 0.5px rgba(255, 255, 255, 0.25);
\t \t text-align: center;
\t \t margin: 4.5em 0 0 0;
\t }
\t \t #footer:after {
\t \t \t content: '';
\t \t \t display: block;
\t \t \t position: absolute;
\t \t \t top: -4.5em;
\t \t \t left: 50%;
\t \t \t height: 4.5em;
\t \t \t border-left: solid 1px #fff;
\t \t }
\t \t #footer a {
\t \t \t color: #fff;
\t \t \t text-shadow: 0 0 0.5px rgba(255, 255, 255, 0.25);
\t \t \t border-bottom-color: rgba(255, 255, 255, 0.5);
\t \t }
\t \t \t #footer a:hover {
\t \t \t \t color: #35b88f;
\t \t \t \t text-shadow: 0 0 0.5px rgba(69, 200, 159, 0.25);
\t \t \t \t border-bottom-color: rgba(53, 184, 143, 0.5);
\t \t \t }
\t \t #footer .icons {
\t \t \t padding: 0.75em 2em 0.75em 2em;
\t \t \t border-radius: 3em;
\t \t \t border: solid 1px #fff;
\t \t \t display: inline-block;
\t \t \t margin: 0 0 3em 0;
\t \t }
\t \t #footer .copyright {
\t \t \t margin: 0 0 9em 0;
\t \t \t font-size: 0.8em;
\t \t }
\t \t /* Header */
\t \t \t #header {
\t \t \t \t padding: 6em 0 6em 0;
\t \t \t }
\t \t \t \t #header header {
\t \t \t \t \t padding-left: 2em;
\t \t \t \t \t padding-right: 2em;
\t \t \t \t }
\t \t \t \t \t #header header h1 {
\t \t \t \t \t \t font-size: 1.75em;
\t \t \t \t \t \t letter-spacing: 6px;
\t \t \t \t \t }
\t \t \t \t #header footer {
\t \t \t \t \t bottom: 4.5em;
\t \t \t \t \t padding: 0 2em 0 2em;
\t \t \t \t }
\t \t \t \t \t #header footer:after {
\t \t \t \t \t \t bottom: -4.5em;
\t \t \t \t \t \t left: 50%;
\t \t \t \t \t \t height: 4.5em;
\t \t \t \t \t }
\t \t \t \t \t #header footer:before {
\t \t \t \t \t \t width: 45px;
\t \t \t \t \t \t height: 33px;
\t \t \t \t \t \t bottom: -2.25em;
\t \t \t \t \t \t margin-left: -22.5px;
\t \t \t \t \t \t margin-bottom: -16.5px;
\t \t \t \t \t \t background-size: 45px 33px;
\t \t \t \t \t }
\t \t /* Banner */
\t \t \t #banner {
\t \t \t \t padding: 3em 2em 3em 2em;
\t \t \t \t background-size: auto 150%;
\t \t \t }
\t \t \t \t #banner header {
\t \t \t \t \t margin: 0 0 1em 0;
\t \t \t \t }
\t \t \t \t \t #banner header h2 {
\t \t \t \t \t \t font-size: 1.5em;
\t \t \t \t \t \t letter-spacing: 6px;
\t \t \t \t \t }
\t \t /* Footer */
\t \t \t #footer .icons {
\t \t \t \t padding: 0.5em 1.25em 0.5em 1.25em;
\t \t \t }
\t \t \t #footer .copyright {
\t \t \t \t font-size: 1em;
\t \t \t \t margin: 0 0 4em 0;
\t \t \t }
\t \t /* Poptrox */
\t \t \t .poptrox-popup .nav-next,
\t \t \t .poptrox-popup .nav-previous {
\t \t \t \t opacity: 1.0;
\t \t \t }
\t \t \t \t .poptrox-popup .nav-next:before,
\t \t \t \t .poptrox-popup .nav-previous:before {
\t \t \t \t \t display: none;
\t \t \t \t }
\t \t \t .poptrox-popup .closer {
\t \t \t \t opacity: 0.5;
\t \t \t }
\t }<!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>[email protected] <br />
(312) 391-3910
</p>
</header>
<form method="post" action="https://formspree.io/[email protected]">
<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="[email protected]" />
</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>
を作る（スニペットを使用）しますが、かどうかをチェックします'＃header'のためのパディングはギャップを引き起こしていますか？ –
ご返信ありがとうございました。私は詰め物をつまむことを試みたが、何もしていないようだ。申し訳ありませんが、これは初めて質問を投稿したときです。私は30000語の制限を超えていたので、投稿に収まるように自分のコードを減らさなければならなかった。 – tgk