White space when using 100% Width - html

Question

A friend and I are working on a website, but for some reason there is still white space when I use 100% width. How can I fix this? These are the main css elements
#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

First best practice is to put universal selector * { padding: 0; margin: 0;}
to avoid the margins and paddings overflow.
I updated your fiddle
Changes to your 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;
}
EDIT: UPDATED THE FIDDLE

Answer 2

There is a very simple fix to this. You have a background color on your text which goes on the whole line, so to make it only on the text area in your info container, simply put that text into a span class. Now just remove that background color from the original class and put it into your span! You can give a class to the span if you will put it into another css file, but I have just put it directly into the html here.
<p><span style="background-color:red;">Hello World</span></p>