css - Display Inline-Block with Widths as Percent

Question

I'm trying to put 2 sections beside each other using inline-block and widths as a percentage, but it's not filling up the entire width of my window.

What I have so far:

HTML

<section class="left-content">
    "Some Code"
</section>
<section class="main-content">
    "Some More Code"
</section>

CSS

.left-content, .right-content { 
    width: 15%; 
    min-width: 150px; 
    padding: 5px; 
    display: inline-block; 
    overflow: hidden; 
    vertical-align: top; 
}
.main-content { 
    width: 85%; 
    min-width: 712px; 
    padding: 10px; 
    display: inline-block; 
    overflow: hidden; 
    vertical-align: top; 
}

But unless I work out the exact percentage down to a decimal point on my screen it doesn't work. Does anyone know of a way to do this using inline-block or do I have to use float?

Answer 1

It is due to the white-space and line break in your HTML markup which causes this issue. There are two options to resolve the "problem":
1. remove the line breaks and white-space from your code
2. set the font-size of the parent element to '0'

Additionally have you set box-sizing: border-box?