Итак, нам нужно сделать заголовок с футбольного сайта для школьного проекта, чтобы я получил https://www.granadacf.es/en. Итак, мой вопрос, как мне сделать текст и заголовок, как на картинке. Мое изображение не остается посередине при изменении размера сайта, а текст не центрируется, как будто слишком много места. 
Это мой код.
#header{
background-color: #a61b2b;
display: grid;
grid-template-columns: 20% 80%;
min-height: 120px;
align-content: center;
justify-content: flex-end
}
#topnav{
position: relative;
top: 40px;
font-family: 'Open Sans',arial,sans-serif;
color: #f2f2f2;
padding: 14px 16px;
font-size: 12px;
font-weight: bold;
list-style: none;
display: flex;
justify-content: space-between;
}
#topnav a:hover {
background-color: #eb0627;
}
#topnav a{
text-decoration:none;
color: #fff
}
#topnav li:hover ul{
display: block;
list-style: none;
background: black;
color: #fff;
padding: 10px;
}
#topnav li ul li{
margin: 10px 0px;
}
#logo{
position: relative;
left: 500px;
width: 55%;
}
.hidden{
display:none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Granada Club de Fútbol | Granada </title>
<link href="style.css" rel="stylesheet" type="text/css"/>
<script src="scripts.js"></script>
</head>
<body>
<div id="header">
<img alt="Logo" id="logo" src="images/logo.png">
<ul id="topnav">
<li><a href="#">NEWS</a>
<ul class="hidden">
<li><a href="#">CLUB</a>
</li>
<li><a href="#">FIRST TEAM</a>
</li>
</ul>
</li>
<li>
<a href="#">THE CLUB</a>
<ul class="hidden">
<li><a href="#">CLUB INFORMATION</a>
</li>
<li><a href="#">STRUCTURE</a>
</li>
</ul>
</li>
<li>
<a href="#">FIRST TEAM</a>
<ul class="hidden">
<li><a href="#">SQUAD </a></li>
<li><a href="#">TRAINING</a></li>
</ul>
</li>
<li><a href="#">TEAMS</a>
<ul class="hidden">
<li><a href="#">GRANADA B </a></li>
<li><a href="#">GFC LADIES</a></li>
</ul>
</li>
<li><a href="#">GRANADA TV</a>
</li>
</ul>
</div>
</body>
</html>