Mysterious bottom padding/margin issue - html

Question

I have a main div with the class of .features, inside this div I have two boxes each one with a height set to 160px and different widths. There's a myterious padding between the end of the two boxes and the main div as seen in the screenshot below:
The padding is about 5px - I would like to remove this padding if possible. I tried adding margin: 0; and padding: 0; to the main div as well as to the two inner boxes but it didn't work.
Here is the html for this section of the page:
<div class="features">
<div class="list-items"></div>
<div class="screenshot-box"></div>
</div>
The css:
.features {
width: 980px;
margin: auto;
margin-top: 25px;
background-color: lightblue;
}
.list-items {
width: 280px;
height: 160px;
display: inline-block;
background-color: red;
}
.screenshot-box {
width: 583px;
height: 160px;
float: right;
padding-bottom: 0;
display: inline-block;
background-color: red;
}

Answer 1

This actually has nothing to do with padding or margin. If we look at the computed style example, we'll see that the height of the element itself is 164px:
This is happening because your inner elements are set to display as inline-block. This means they're affected by font-size, and ultimately the font-size is causing the height of the parent element to be greater than the height of the inner elements.
There are two fixes:
Specify a font-size of 0 on your .features element, and then reset this within the inner elements (by giving them a font-size of 16, or whichever your default size is).
.features {
width: 980px;
margin: auto;
margin-top: 25px;
background-color: lightblue;
font-size: 0;
}
.list-items {
width: 280px;
height: 160px;
display: inline-block;
background-color: red;
font-size: 16px;
}
.screenshot-box {
width: 583px;
height: 160px;
float: right;
padding-bottom: 0;
display: inline-block;
background-color: red;
font-size: 16px;
}
<div class="features">
<div class="list-items"></div>
<div class="screenshot-box"></div>
</div>
Give your .features element a height of 160px itself to match its children. With this the browser doesn't have to calculate what the height should be itself.
.features {
width: 980px;
margin: auto;
margin-top: 25px;
background-color: lightblue;
height: 160px;
}
.list-items {
width: 280px;
height: 160px;
display: inline-block;
background-color: red;
}
.screenshot-box {
width: 583px;
height: 160px;
float: right;
padding-bottom: 0;
display: inline-block;
background-color: red;
}
<div class="features">
<div class="list-items"></div>
<div class="screenshot-box"></div>
</div>

Answer 2

Just make font-size as 0 for .features, and it will take full width. Here is your fiddle.
.features {
width: 980px;
margin: auto;
margin-top: 25px;
background-color: lightblue;
font-size: 0;
/*Just make font size as 0*/
}
.list-items {
width: 280px;
height: 160px;
display: inline-block;
background-color: red;
}
.screenshot-box {
width: 583px;
height: 160px;
float: right;
padding-bottom: 0;
display: inline-block;
background-color: red;
}
<div class="features">
<div class="list-items"></div>
<div class="screenshot-box"></div>
</div>

Answer 3

You could also just ditch the display: inline-block on both child elements and set float: left on .list-items and display: table on .features (code example). Added benefit that without hardcoded parent div height, the parent div will expand to fit child content.
#james donnelly has already given you an accurate and concise explanation to the cause.