Div not 100% across - html

Question

I have seen the similar questions on Stackoverflow, I tried their instructions but still it makes no difference. I have done the margin:0 padding:0 on my code too.
The first div is the side bar, the second div is the content(blue), and there is white space on the right. The space on the right isnt a third div, it seems to just be white space. I dont want the white space to be there.
Here is my CSS/HTML:
#dashboard {
width: 100%;
}
#content {
float: right;
width: 80%;
overflow: hidden;
background: aqua;
}
#sidebar {
font-family: "Open Sans";
font-size: 16px;
font-style: normal;
font-variant: normal;
font-weight: bolder;
line-height: 18px;
color: #c5cdd1;
text-decoration: none;
background-color: #14253f;
width: 220px;
height: 100%;
float: left;
width: 20%;
overflow: hidden;
}
<section id="dashboard">
<div id="sidebar">
<!-- Logo -->
<div id="logo"><img src="img/FDMxLogo.png" /></div>
<!-- Nav -->
<nav id="nav">
<a class="mob-nav"> </a>
<ul>
<li id="m-item" class="current">
<img src="img/ico_home.png" />DASHBOARD
</li>
<li id="m-item">
<img src="img/ico_report.png" />REPORTS
</li>
<li id="m-item">
<img src="img/ico_cust.png" />CUSTOMIZE
</li>
<li id="m-item">
<img src="img/ico_set.png" />SETTINGS
</li>
<li id="m-item">
<img src="img/ico_about" />ABOUT
</li>
<li id="m-item">
<img src="img/ico_con" />CONTACT
</li>
</ul>
</nav>
</div>
<div id="content">
Add Graph<br>
<br>
<br>
<br>
<?php echo $div;?>
<button style="margin-top:0em;width:100%; " type="submit" onClick="remove();">REMOVE</button>
</div>
</section>

Answer 1

Here is a simple edit you could try.
I added
display:table;
to #dashboard.
I removed float from both #content and #sidebar. I also removed thie width percentages from both but left the width:220px. in sidebar.
Then I added
display:table-cell;
to both #content and #sidebar.
Fiddle:https://jsfiddle.net/r5jcv2yu/

Answer 2

The 80% width on #content is messing it up I think. You are also using width twice on #sidebar