页面右侧的细白线

时间:2018-09-07 04:05:20

标签: padding margins

我无法弄清楚为什么页面右侧的页边距(或边距)很小。您可以在绿色图像的右侧看到它。该网页位于http://www.puremisthealth.com上。

我在多个浏览器上都看到了这个问题。我怀疑这是一个小问题,但我找不到罪魁祸首。当我在Chrome中使用Inspect时,它似乎正在影响整个身体。

请参见下面的代码。

<html>

<head>

<title>PureMist</title>

<link rel="stylesheet" href="styles.css">

</head>

<body>


<div id="logo">

    <a href="http://www.puremisthealth.com">
        <img src="http://www.puremisthealth.com/images/logo.jpg">
    </a>

</div>

<div class="navwrapper">

    <div class="nav">

        <div class="nav-item-active"><a href="http://www.puremisthealth.com">HOME</a></div>

        <div class="nav-item"><a href="/about">ABOUT</a></div>

        <div class="nav-item"><a href="/how">HOW IT WORKS</a></div>

        <div class="nav-item"><a href="/faq">FAQ</a></div>

        <div class="nav-item"><a href="/contact">CONTACT</a></div>

    </div>

</div>

<div id="touchless">



</div>



</body>

</html>

CSS:

html,body
{
width: 100%;
margin: 0;
padding: 0;
overflow-x: hidden; 
}


@font-face {
 font-family: MeeraInimai;
 src: url('MeeraInimai-Regular.ttf'); 
}


a {

text-decoration: none;
color: #949695;

}


#logo {

margin-top: 50px;
text-align: center;
}


.navwrapper {

width: 100%;
margin: 35px 0 35px 0;

}


.nav {
    width: 100%;
text-align: center;
}


.nav-item {

font-family: 'MeeraInimai', Arial, sans-serif;
margin: 0 20px 0 20px;
display: inline-block;
    color: #949695;
    font-weight: bold;
    font-size: 1.1em;
    text-align: center;
letter-spacing: 4px;
}

.nav-item:hover {

font-family: 'MeeraInimai', Arial, sans-serif;
margin: 0 20px 0 20px;
display: inline-block;
    color: #949695;
    font-weight: bold;
    font-size: 1.1em;
    text-align: center;
letter-spacing: 4px;
border-bottom: 4px solid #bcd762;
line-height: 2;

}

.nav-item-active {

font-family: 'MeeraInimai', Arial, sans-serif;
margin: 0 20px 0 20px;
display: inline-block;
    color: #949695;
    font-weight: bold;
    font-size: 1.1em;
    text-align: center;
letter-spacing: 4px;
border-bottom: 4px solid #bcd762;
line-height: 2;
}

#touchless {

background-image: url("/images/touchless.jpg");
background-size: 100%;
background-repeat: no-repeat;
margin: 40px 0 50px 0;
height: 450px;

}

0 个答案:

没有答案