我无法弄清楚为什么页面右侧的页边距(或边距)很小。您可以在绿色图像的右侧看到它。该网页位于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;
}