Wierd white space between border and content

Issue

I see whitespace between the div's border and the nav in chrome only at a specific screen size. I also see it in the fiddle so I don't have any extra code. Also same happens in the snippet, I see the white space only when I expand it to full page.

*{
  padding: 0;
  margin: 0;
  font-size: 0;
  line-height: 0;
}
div{
  min-height: 100vh;
  border: 0.5vw solid red;
  width: 100%;
  box-sizing: border-box;
}
nav{
  background: black;
  height: 11vh;
}

<div>
  <nav>
  </nav>
</div>

Solution

The problem is this:

border: 0.5vw solid red;

and that doesn't give you a whole number as such it anti-alias the border with the white DIV and what you are likely be seeing is more orange than white.

I've come up with a hack by having 2 separate divs one for the nav and that div background is black so your border is anti-alias to black rather than white.

Fiddle: http://jsfiddle.net/dg45wfc8/

*{
  padding: 0;
  margin: 0;
  font-size: 0;
  line-height: 0;
}
.content-div {
  min-height: calc(((100vh - 11vh) - 0.5vw));
  border: 0.5vw solid red;
  width: 100%;
  box-sizing: border-box;
  
  border-width: 0 0.5vw 0.5vw 0.5vw;
  border-style: solid;
  border-color: red;
}

nav{
  background: black;
  height: 11vh;
}

.nav-div {
 border-width: 0.5vw 0.5vw 0 0.5vw;
 border-style: solid;
 border-color: red;
 background: black;
}

<div class="nav-div">
  <nav>
  </nav>
</div>
<div class="content-div">>
</div>

Answered By - John