Question

我正在建立一个响应式网站，我遇到了问题。该网站的移动版本的宽度需要100％，我设法做到这一点，但有些东西在右侧创建空白（这会导致水平滚动）。

我一整天都在寻找原因，但我找不到它。

当窗口宽度低于600像素时，会出现问题。

我的网站代码：

HTML

    <body>
<div class="container">
    <header>
        <div class="top-border"></div>
        <div class="header-content">
            <div class="logo"><img alt="Tuinservice Duckers" src="images/logo.png" width="294" height="64" /></div>
            <div class="menuknop">Menu</div>
            <nav class="menu">
                <ul>
                    <li class="geenmargemenu"><a class="active" href="#">Home</a></li>
                    <li><a href="#">Nieuws</a></li>
                    <li><a href="#">Over ons</a></li>
                    <li><a href="#">Foto's</a></li>
                    <li><a href="#">Tuintips</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </nav>
            <div class="clear"></div>
        </div>
        <div class="clear"></div>
    </header>

    <div class="fullwidthimg">
    <div class="message">
    <h1 class="displayfull headerheading">Welkom, wij zijn Tuinservice Duckers.</h1>
    <h1 class="displaymobile headerheading">Home</h1>
    <a href="#" class="button"><h2>Bekijk onze tuinen</h2></a></div>
    <img width="1920" height="350" alt="Afbeelding Tuin" src="images/slider/IMG_4708.jpg" />
    <div class="clear"></div>
    </div>


    <div class="content">
    <h1 class="homedriekolom">Wij zijn een gepassioneerd hoveniersbedrijf gevestigd in Stein.</h1>
    </div>

    <div class="contentcontainer">
    <div class="content">
    <div class="glyph driekolom begindivs">
        <div class="fs1" aria-hidden="true" data-icon="&#xf383;"></div>
        <h2>Ontwerp</h2>
        <p>Samen met u ontwerpen wij een unieke tuin, een project op maat dat volledig aan uw wensen voldoet. Wij zullen niet tevreden zijn totdat u dat ook bent.</p>
    </div>
    <div class="glyph driekolom negenzestigmarge begindivs">
        <div class="fs1" aria-hidden="true" data-icon="&#xf290;"></div>
        <h2>Aanleg</h2>
        <p>Ons professionele team legt op vakkundige wijze uw tuin aan en denkt daarbij aan elk detail. De aanleg wordt volledig verzorgd zodat u uw handen vrij heeft.</p>
    </div>
    <div class="glyph driekolom begindivs">
        <div class="fs1" aria-hidden="true" data-icon="&#xf039;"></div>
        <h2>Onderhoud</h2>
        <p>Ook voor het onderhouden van uw tuin kunt u terecht bij Tuinservice Duckers. Zo bent u er altijd van verzekerd dat uw tuin in de perfecte staat verkeerd.</p>
    </div>
    <div class="clear"></div>
    </div>
    </div>



    <div class="content">
    <h1 class="homedriekolom">Onze tuinen</h1>
    <span class="onderschrift">Onze tuinontwerpen kenmerken zich door een mooi lijnenspel, waarbij rust in het ontwerp de boventoon voert. Zelf noemen wij onze ontwerpen 'no-nonsense tuinen', met niet veel poespas maar zoals tuinen behoren te zijn.</span>
    <div class="driekolimg"><img src="images/design/homeimages/IMG_1511.jpg" /></div>
    <div class="driekolimg"><img src="images/design/homeimages/IMG_4666.jpg" /></div>
    <div class="driekolimg negenzestigweg"><img src="images/design/homeimages/IMG_4708.jpg"/></div>
    <div class="clear"></div>
    </div>

    <div class="contentnotop hidemobile">
    <h1 class="homedriekolom">Partners</h1>
    <span class="onderschrift">Voor het aanleggen van onze tuinen gebruiken wij alleen materiaal van de hoogste kwaliteit, dit wordt mogelijk gemaakt door de volgende bedrijven.</span>
    <div class="vierkolom vierkolimg"><a href="http://www.tuinserviceduckers.nl/"><img src="images/logo-s/BW_Duckers.png" onmouseover="this.src='images/logo-s/Duckers.png'" onmouseout="this.src='images/logo-s/BW_Duckers.png'" /></a></div>
    <div class="vierkolom vierkolimg"><a href="http://in-lite.nl/" target="_blank"><img src="images/logo-s/BW_Inlite.png" onmouseover="this.src='images/logo-s/Inlite.png'" onmouseout="this.src='images/logo-s/BW_Inlite.png'" /></a></div>
    <div class="vierkolom vierkolimg"><a href="http://www.tigerturf.nl/" target="_blank"><img src="images/logo-s/BW_TigerTurf.png" onmouseover="this.src='images/logo-s/TigerTurf.png'" onmouseout="this.src='images/logo-s/BW_TigerTurf.png'" /></a></div>
    <div class="vierkolom vierkolimg"><a href="http://www.gardena.com/nl/" target="_blank"><img src="images/logo-s/BW_Gardena.png" onmouseover="this.src='images/logo-s/Gardena.png'" onmouseout="this.src='images/logo-s/BW_Gardena.png'" /></a></div>
    <div class="clear"></div>
    </div>
    <div class="push"></div>
    </div>

    <footer class="footer">

    <div class="footercontainer">

    <div class="footerkolom hidemobile">
    <h2>Over ons</h2>
    <p>Als gepassioneerd hoveniersbedrijf houden wij ons voornamelijk bezig met het aanleggen van tuinen en bestratingen. Ook voor het ontwerp en onderhoud kunt u bij ons terecht.</p>
    </div>
    <div class="footerkolom">
    <h2>Contact</h2>
    <p>
    <span class="vijfhonderd">Tuinservice Duckers</span><br />
    Maasbanderkerkweg 36<br />
    6171 RT, Stein<br />
    +31 (0) 46 433 81 46<br />
    info@tuinserviceduckers.nl
    </p>
    </div>
    <div class="footerkolom negenzestigweg">
    <h2>Laatste nieuws</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis suscipit accumsan quam, sodales vulputate velit dapibus ac. Nam nibh augue, congue sit amet ornare quis, imperdiet rutrum magna.</p>
    </div>
    <div class="clear"></div>
    </div>

    <div class="clear"></div>
    </footer>
    <div class="footerbottom">
    <div class="footerbottomkolom">
    <div class="rights hidemobile">&copy; Tuinservice Duckers, <a href="http://www.visiamedia.nl" target="_blank" title="Webdesign & Grafisch ontwerp Limburg"><strong>design</strong> door Visia Media</a></div>
    <div class="socialmedia"><a href="http://www.facebook.com/TuinserviceDuckers" target="_blank" title="Volg Tuinservice Duckers op Facebook"><div class="fs1" aria-hidden="true" data-icon="&#xe001;"></div></a><a href="http://www.twitter.com/tsDuckers" target="_blank" title="Volg Tuinservice Duckers op Twitter"><div class="fs1" aria-hidden="true" data-icon="&#xe000;"></div></a><a href="http://plus.google.com/118078160798794822832/" target="_blank" title="Volg Tuinservice Duckers op Google+"><div class="fs1" aria-hidden="true" data-icon="&#xe002;"></div></a></div>
    <div class="clear"></div>
    </div>
    <div class="clear"></div>
    </div>

</body>

CSS：

    @charset "utf-8";

    * {
    margin:0px;
    padding:0px;
    -webkit-appearance: none;
    font-family: 'Lato', sans-serif;
    font-weight:400;
    color:#676767;
    font-size:15px;
    text-decoration:none;
    border:none;
    line-height:145%;
    }

    h1, h2, h3, h4, h5, h6, h7, .fs1 {
    color:#403f3f;
    font-weight:300;
    }

    strong {
    font-weight:500;
    color:inherit;
    font-size:inherit;
    }

    h1.homedriekolom {
    text-align:center;
    font-size:30px;
    line-height:30px;
    }
h1.homedriekolom strong {
    font-weight:500;
}
.onderschrift {
    text-align:center;
    font-size:17px;
    font-weight:300;
    display:inline-block;
    padding:20px 0px 40px;
    color:#403f3f;
}
span.homequote {
    text-align:center;
    font-size:21px;
    font-style:italic;
    display:inline-block;
    font-weight:300;
}

body, html {
    background-color:white;
    height:100%;
    width:100%;
}

.container {
    width:100%;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin-top:0;
    margin-left:auto;
    margin-right:auto;
}

header {
    width:100%;
}

.top-border {
    width:100%;
    height:6px;
    background-color:#9cab5c;
}

.header-content {
    width:950px;
    margin:auto;
    padding:0 5px;
}

.logo {
    float:left;
}
.logo img {
    height:32px;
    margin-top:16px;
    width:auto !important;
}

.menu {
    float:right;
    margin:20px 0;
}
.menu ul {
    list-style:none;
}
.menu ul li {
    display:inline;
    margin-left:22px;
}
.menu ul li a {
    color:#565656;
}
.menu ul li a:hover, .menu ul li a.active {
    color:#9cab5c;
}

.clear {
    width:100%;
    clear:both;
    margin-top:-1px;
}

.fullwidthimg {
    position:relative;
}
.fullwidthimg, .fullwidthimg img {
    width:100%;
    height:auto !important;
}

.fullwidthimg .message {
    position:absolute;
    left:50%;
    width:950px;
    padding:0 5px;
    margin-left:-480px;
    text-align:center;
    height:136px;
    top:50%;
    margin-top:-68px;
}
.fullwidthimg .message h1 {
    color:white;
    font-size:43px;
    font-weight:300;
    text-shadow: 0px 1px 1px #384523;
}
.fullwidthimg .message .button {
    padding:15px 30px;
    background-color:#9cab5c;
    margin-top:14px;
    display:inline-block;
}
.fullwidthimg .message .button h2 {
    color:white;
    font-size:15px;
    text-transform:uppercase;
    font-weight:400;
}
.fullwidthimg .message .button:hover {
    background-color:#8d9b50;
}

.contentnotop {
    width:950px;
    margin:0px auto;
    padding:0px 5px 40px;
}
.contentnotop p {
    margin-bottom:7px;
}

.content {
    width:950px;
    margin:0px auto;
    padding:60px 8px;
}
.contentcontainer {
    width:100%;
    background-color:#f0f0f0;
}

.content p {
    margin-bottom:7px;
}

.begindivs {
    text-align:center;
}
.begindivs .fs1 {
    font-size:40px;
    line-height:40px;
}
.begindivs h2 {
    display:inline-block;
    font-size:22px;
    font-weight:500;
    margin:20px 0 -5px;
}
.begindivs p {
    width:84%;
    margin:20px auto 0;
    font-size:14px;
}
.driekolom {
    width:33.3%;
    float:left;
}
.driekolimg {
    width:33.3%;
    float:left;
}
.driekolimg img {
    width:93%;
    height:auto;
    margin:0 auto;
    display:block;
}

.vierkolom {
    width:25%;
    height:12,5%;
    float:left;
    overflow:hidden;
}
.vierkolimg img {
    width:70%;
    margin-top:-50%;
    height:auto;
    margin:0 auto;
    display:block;
}

footer {
    margin-top:32px;
    width:100%;
    background-color:#9cab5c;
    height:300px;
    color:white;
}
.footerbottom {
    background-color:#8d9b50;
    color:white;
}
.footerbottomkolom {
    color:white;
    width:960px;
    margin:auto;
    font-size:17px;
    padding:12px 0 12px;
}
.footerbottomkolom a {
    font-size:17px;
    color:white;
}
footer a {
    color:white;
}
.socialmedia {
    float:right;
    width:auto;
    text-align:right;
}
.socialmedia .fs1 {
    display:inline-block;
    font-size:20px;
    margin:5px 0px 0px 13px;
}
.socialmedia * {
    font-size:inherit;
    color:white;
}
.rights {
    font-size:inherit;
    color:white;
    float:left;
}

.push {
    height:300px;
}

.footercontainer {
    width:950px;
    padding:67px 5px;
    margin:0 auto;
}
.footerkolom {
    width:28.3%;
    float:left;
    padding-right:5%;
}
.footerkolom h2 {
    color:white;
    font-weight:600;
    font-size:19px;
    line-height:19px;
    margin-bottom:23px;
}
.footerkolom p {
    color:white;
    line-height:22px;
}

.vijfhonderd {
    font-weight:bold;
    color:white;
}

.displaymobile {
    display:none;
}


/* ICONS */

@font-face {
    font-family: 'whhglyphs';
    src:url('fonts/whhglyphs.eot');
    src:url('fonts/whhglyphs.eot?#iefix') format('embedded-opentype'),
        url('fonts/whhglyphs.woff') format('woff'),
        url('fonts/whhglyphs.ttf') format('truetype'),
        url('fonts/whhglyphs.svg#whhglyphs') format('svg');
    font-weight: normal;
    font-style: normal;
}

[data-icon]:before {
    font-family: 'whhglyphs';
    content: attr(data-icon);
    speak: none;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}

.menuknop {
    display:none;
}

@media all and (max-width: 960px) {

.fullwidthimg .message .button {
    padding:0px;
    background-color:#9cab5c;
    margin:0px;
    display:none;
}
.fullwidthimg, .fullwidthimg img {
    width:100%;
    height:auto !important;
}

.fullwidthimg .message {
    position:absolute;
    left:50%;
    width:96%;
    padding:0 2%;
    margin-left:-50%;
    text-align:center;
    padding:0;
    height:34px;
    top:50%;
    margin-top:-22px;
}
    .fullwidthimg .message h1 {
    color:white;
    font-size:34px;
    line-height:34px;
    font-weight:300;
    text-shadow: 0px 1px 1px #384523;
    }

    .header-content {
    width:100%;
    padding:0px 0%;
    }

    h1.homedriekolom {
    line-height:135%;
    }

    .content, .contentnotop {
    width:96%;
    padding: auto 2%;
    }

    .negenzestigweg {
    display:none;
    }

    .driekolimg {
    width:48%;
    margin:1%;
    }

    .driekolimg img {
    width:100% !important;
    }

    .driekolom {
    width:100%;
    }
    .negenzestigmarge {
    margin:60px 0px;
    }
    .driekolom p {
    width:65%;
    }

    .footercontainer {
    width:100%;
    padding:67px 0px !important;
    }

    .footerkolom {
    width:46%;
    padding-left:2% !important;
    padding-right:2% !important;
    float:left;
}

.footerbottom {
    width:100% !important;
}
.footerbottomkolom {
    width:96%;
    padding:auto 2% auto 2% !important;
}

.menu ul li.geenmargemenu {
    margin-left:10px !important;
}

.logo {
    margin-left:2%;
}
.menu {
    margin-right:2%;
}

}

@media all and (max-width: 600px) {


    html, body {
        width:100% !important;
        padding:0 !important;
        margin:0 !important;
    }

    .header, .header-content {
        width:100%;
        padding:0 !important;
        margin:0 !important;
    }

    .menuknop {
    display:block !important;
    color:white;
    background-color:#8d9b50;
    width:92% !important;
    cursor:pointer;
    font-size:18px;
    padding:5px 4% !important;
    margin:0 !important;
} 

    .menu {
        width:100%;
        margin:0 !important;
        display:none;
        padding:0 !important;
    }
    .menu ul li, .menu ul li.geenmargemenu {
        width:100%;
        display:block;
        margin:0 !important;
        padding:0 !important;
        background-color:#9cab5c;
    }
    .menu ul li:hover {
        background-color:#8d9b50;
    }

    .menu ul li a {
        color:white;
        font-size:18px;
        padding:5px 4%;
        width:92%;
        display:block;
    }
    .menu ul li a:hover, .menu ul li a.active {
        color:white;
    }

    .logo {
        float:none;
        margin:auto;
        display:block;
        width:100%;
        padding:0 !important;
        height:auto !important;
    }
    .logo img {
        width:60% !important;
        height:auto !important;
        display:block;
        margin:26px 20% !important;
    }

    .displaymobile {
        display:block;
    }
    .displayfull, .hidemobile {
        display:none;
    }

    .footerkolom {
    width:96%;
    margin-left:2% !important;
    margin-right:2% !important;
    float:left;
    }

    .driekolimg {
    width:96% !important;
    margin:2% !important;
    padding:0 !important;
    }

    .driekolimg img {
    width:100% !important;
    padding:0 !important;
    margin:0 !important;
    }

    .socialmedia {
    width:100%;
    text-align:center;
    margin:0 !important;
    padding:0 !important;
    }

    }

这是我正在谈论的页面：

http://www.visiamedia.nl/duckers/

Answer 1

问题是由第174行content div上的填充引起的：

.content {
    padding: 60px 8px;
}

将8px设置为零。

无缘无故的空白

1 个答案: