It seems like the solution you were looking for is ready:
preview
In essence, you can group the header (image + text) within a CSS flexbox, and the remaining content in another flexbox. I have adjusted the CSS file to incorporate these modifications. Hopefully, this resolves your query! Feel free to reach out if you need further assistance.
View the implementation in JSFiddle: https://jsfiddle.net/rzLbkw9m/
The following is the provided HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="holiday.css" rel="stylesheet" type="text/CSS">
<title>Task 4</title>
</head>
<body>
<div class="header-container">
<div class="header-image">
<img src="https://st.depositphotos.com/1115174/1875/v/450/depositphotos_18752455-stock-illustration-summer-beach-vacation-background.jpg" alt="Holiday" width="400" height="200" align="left">
</div>
<div class="header-text">
<h1>Holiday Time</h1>
<h3>Get away from it all</h3>
</div>
</div>
<div class="row">
<div class="list-column">
<ul class="list">
<li><a href="">Destinations</a></li>
<li><a href="">Deals</a></li>
<li><a href="">Flights</a></li>
<li><a href="">Cruise</a></li>
<li><a href="">Extras</a></li>
<li><a href="">Money</a></li>
</ul>
</div>
<div class="main-column">
<div class="paragraph">
<p>
<!-- Insert lengthy Lorem Ipsum content here -->
</p>
</div>
<div class="paragraph">
<p>
<!-- Insert additional extended Lorem Ipsum content here -->
</p>
</div>
</div>
</div>
<div class="footer"> Contact: 0191 227 1111</div>
</body>
</html>
Below is the incorporated CSS file:
/* header styling */
.header-container {
display: flex;
align-items: center;
border: 1px solid lightblue;
}
.header-text {
margin-left: 25px;
}
.header-text h1 {
color: purple;
font-size: 48px;
}
.header-text h3 {
margin-left: 20px;
}
/* navbar layout */
.list-column {
flex: 30%;
align-self: flex-start;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li a:first-of-type {
padding-top: 2px;
}
/* main section styling */
.row {
margin-top: 10px;
display: flex;
align-items: flex-start;
}
.paragraph {
margin-bottom: 25px;
}
.intext-img {
margin-top: 5px;
margin-left: 10px;
margin-bottom: 10px;
}
p {
font-size: 18px;
margin: 0px;
}
/* footer alignment */
.footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 0.8rem;
text-align: left;
background-color: #64A3D6;
}