Display: Flex; Has No Effect In Header Tag

Cannot make the logo and text appear in a row on header tag of webpage by applying flex in css. My code is along with this post and also attached output on web browser (chrome) at the end.. Is this problem caused by a mistake in below code. New to webdesign, can anyone find what's wrong with my code. I want to apply flex on tag so that img and content will be in row. But that's not happening. See webpage screenshot at the post end. HTML Code below:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bike Repair Shop</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="cssReset.css">
</head>
<body>
<div class="container">
<header>
<div class="logo">
<img src="images/logo-roar-bikes.png" alt="Website Logo">
</div>
<nav>
<a href="">Book</a>
<a href="">Online</a>
<a href="">About</a>
<a href="">Contact</a>
</nav>
</header>
<main>
<div class="herobox1">
<h1>Mobile bike repairs </h1>
<p>Many people have difficulty getting their bikes to a bike shop. We call to your office or home anywhere in greater Dublin.</p>
<p>Fast, convenient bike servicing with up-front pricing. All without the hassle of taking your bike into a shop. </p>
</div>
<div class="herobox2">
<img src="images/image-bike-repair-service.jpg" alt="Person servicing bike in Dublin">
</div>
</main>
<div class="cards">
<div class="card1"></div>
<div class="card2"></div>
<div class="card3"></div>
</div>
</div>
</body>
</html>

.container {
width: 1024px;
min-height: 300px;
margin-left: auto;
margin-right: auto;
}
header {
background-color: #63BC7D;
min-height: 100px;
display: flex;
}
main {
/*background-color: #179E3F; */
min-height: 300px;
display: flex;
align-items: center;
/*justify-content: space-between;*/
}
.cards {
background-color: #AC1149;
min-height: 300px;
display: flex;
justify-content: space-between;
}
.card1 {
background-color: #6EB806;
min-height: 300px;
width: 30%;
}
.card2 {
background-color: #36E059;
min-height: 300px;
width: 30%;
}
.card3 {
background-color: #00FF09;
min-height: 300px;
width: 30%;
}
.herobox1 {
flex: 2;
/*background-color: #8D4E85;*/
}
.herobox2 {
/*background-color: #684F96;*/
flex: 1;
}