Margin/width not rending properly on a div element position: fixed; display: table-cell; set

Question

I need my .nav-container position: fixed; so that content doesn't move on scrolling up or down. But doing this creates a gap between the .nav-container and the .page-content, a certain window widths. At these widths there appears to be a small white line between the red background of the .nav-container and the brown border to its right.

If I get rid of the position: fixed; the margins render perfectly but I need that content fixed.

Does anyone know of a work around?

Would it best / possible to leave off the position: fixed; and use Javscript to move all the content in the .nav-container down and up as the window scrolls so that it appears the content is not moving at all?

live link: https://webzume.herokuapp.com/

relevant css:

#content {
width: 100%;
display: table; }


#index {
  display: table-row; }

#index .nav-container { 
position: fixed; 
background-color: rgba(222, 89, 58, 0.95);
box-sizing: border-box;
padding-top: 2.5rem;
vertical-align: top;
width: 22.6%;
display: table-cell;}

Answer 1

Never use table formatting for layout! Especially not in combination with position!

Heres how to fix it without the table layout:

1. Remove display: table from #content
2. Remove display: table-row from #index
3. Remove position: fixed from #index .nav-container

On both #index .nav-container and #index .page-content , do the following:

4. Remove display: table-cell
5. Add float: left
6. Add height: 100%
7. Add overflow: auto

Answer 2

Have you set page Margin and Padding to zero?

html, body { margin:0; padding:0; }