Содержимое <div>не достигает полной высоты

Question

Я создаю навигационную панель для моего нового сайта в HTML. Он работал идеально, пока я не добавил свой lo go в качестве элемента списка - остальные элементы теперь не достигают полной высоты в <div>.

Это то, что я ' Я получаю (красный фон на всех пунктах списка, чтобы сделать его более понятным) .

Это мой HTML:

<div class="header">
    <ul>
        <li style="float: left;"><a href="/"><img src="media/logo/logo_dark.svg" width="215.635875s" height="47.909" alt="DISTORT"></a></li>
        <li><a href="contact">Contact</a></li>
        <li><a href="portfolio">Portfolio</a></li>
        <li><a href="about">About</a></li>
        <li class="active"><a href="/">Home</a></li>
    </ul>
</div>

И мой CSS:

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #fff;
    border-bottom: 2px solid #000;
  }

li {
    float: right;
  }

li a {
    display: block;
    color: #000;
    text-align: center;
    padding: 14px 50px;
    text-decoration: none;
    background-color: #ff0000;
  }

li a:hover {
    text-decoration: underline;
}

Любая помощь будет оценена. Спасибо!