Is there a way to keep my .nav-container position: fixed; without creating a gap between it and the .page-content at certain window widths? When I set the position to fixed, a small white line appears between the red background of the .nav-container and the brown border on its right side.
Removing the position: fixed; property resolves the margin issue, but I need the content to remain fixed.
Does anyone have any suggestions for a workaround?
Could utilizing JavaScript to move the content in the .nav-container up and down as the window scrolls be a viable solution to make it appear like the content is not moving at all?
Live link:
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;}