Почему дочерний элемент не помещается внутри родительского элемента (что приводит к полосам прокрутки)?

У меня есть дочерний элемент, который не помещается внутри родительского элемента (похоже на 1 пиксель), что приводит к вертикальным полосам прокрутки. Проблема возникает только в старых версиях Windows/Internet Explorer. Я думаю, что это была Windows 7.

Более подробно: <label for = "toggle">Menu</label> — это элемент с полосами прокрутки, поскольку он не помещается в <header>. Но высота header определяется label, поэтому я не понимаю, почему это так.

Пример скрипта JS: https://jsfiddle.net/a9zkgyx7/

<header>
    <div class = "logo"><a href = "index.html"><img src = "resources/logo.svg"></a></div>
    <input type = "checkbox" id = "toggle">
    <label for = "toggle">Menu</label>
    <nav>
        <ul>
            <li><a href = "link.html">Text</a></li>
            <li><a href = "link.html">Text</a></li>
            <li><a href = "link.html">Text</a></li>
            <li><a href = "link.html">Text</a></li>
            <li><a href = "link.html">Text</a></li>
        </ul>   
    </nav>
</header>





 article, aside, figure, footer, header, main, nav, section {
        display: block;
        }

header { 
    padding:0 3.6rem;
    border-bottom:1px solid;
    overflow:auto;
    }

.logo {
    float:left;
    width:13.2rem;
    }

#toggle {
    display: none;
    }

#toggle ~ label {
    display: inline-block;
    cursor: pointer;
    float:right;
    font-size:2.4rem;
    line-height:7.1rem;
    }


nav {
    height:0;
    overflow:hidden;
    position:absolute;
    top:7.2rem;
    left:0;
    right:0;
    background-color:rgb(255,255,255);
    z-index:102;
    text-align:center;
    font-size:4.8rem;
    line-height:1.75em;
    }

#toggle:checked ~ nav {
    height: 100%;
    }