使用100％宽度时的空白

Question

我和一个朋友正在一个网站上工作，但由于某种原因，当我使用100％宽度时仍存在空白区域。我怎样才能解决这个问题？这些是主要的CSS元素

#info_container{ 
height:100%; 
width:100%; 
display:inline-block; 
padding-top:3%; 
background-color:#D3D3D3; 
} 

#main_header { 
background: -webkit-linear-gradient(#2a2a2a, #545454); 
text-align: center; 
align-items: center; 
vertical-align: middle; 
position: absolute; 
width:100%; 
height:8%; 
margin:-1em; 
position:fixed; 
display: table; 
width: 100%; 
table-layout: fixed; 
/* For cells of equal size */ 
} 

JSFiddle

Answer 1

首先最好的做法是* { padding: 0; margin: 0;} 把通用选择，以避免边距和补溢出。

我更新了fiddle

更改你的CSS

* { padding: 0; margin: 0; } 

#main_header { 
    background: -webkit-linear-gradient(#2a2a2a, #545454); 
    text-align: center; 
    align-items: center; 
    vertical-align: middle; 
    position: absolute; 
    width:100%; 
    position:fixed; 
    display: table; 
    width: 100%; 
    table-layout: fixed; 
    /* For cells of equal size */ 
} 
#main_header a { 
    display:inline-block; 
    text-decoration:none; 
    color:#567aa9; 
    display: table-cell; 
    vertical-align: middle; 
    padding:.5%; 
} 
a span { 
    text-decoration:none; 
    color:#878787; 
    font-size:55px; 
    top: 10%; 
    overflow: hidden; 
    left:50%; 
} 
.a1:hover { 
    color:#bababa; 
} 
.a2:hover{ 
    color:#bababa; 
} 
.a3:hover{ 
    color:#bababa; 
} 
.a4:hover{ 
    color:#bababa; 
} 
#info_container{ 
    height:100%; 
    width:100%; 
    display:inline-block; 
    padding-top:7%; 
} 
html { 
    font-size: 62.5%; 
} 

body { 
    font-size: 1em; 
} 

@media (max-width: 300px) { 
    html { 
     font-size: 70%; 
    } 
} 

@media (min-width: 500px) { 
    html { 
     font-size: 80%; 
    } 
} 

@media (min-width: 700px) { 
    html { 
     font-size: 120%; 
    } 
} 

@media (min-width: 1200px) { 
    html { 
     font-size: 200%; 
    } 
} 
#info_container{ 
    height: 100px; // changed this from 100%; 
    width:100%; 
    padding-top: 3%; // removed 
    display:inline-block; 
    background-color:#D3D3D3; 
} 

编辑：更新了FIDDLE

Answer 2

有一个很简单的解决了这一点。您的文字背景颜色会在整行上显示，因此只需在信息容器中的文本区域上添加背景颜色，只需将该文本放入span类即可。现在只需从原始类中移除该背景色并将其放入您的范围！如果你将它放到另一个css文件中，你可以给这个span放上一个类，但是我只是直接把它放到html中。

<p><span style="background-color:red;">Hello World</span></p>