https://i.sstatic.net/4kNAd.png
I am currently facing an issue with the layout of my navigation bar, as it is displaying in a column instead of a row like the format shown in the image. I have tried using flexbox and setting the display to inline-block individually for each element, but I am not sure if this is the most efficient way to achieve the desired format. I also attempted using grid layout with a 4x3 structure, but struggled to make the main section fill up the entire row with only 3 sections. Any advice on how to fix this or suggestions for a better approach would be greatly appreciated.
body {
background-color: white;
font-family: 'Markazi Text', 'serif';
text-align: center;
display: flex;
flex-flow: column wrap;
justify-content: stretch;
}
header>img {
width: 25%;
}
nav>ul {
list-style: none;
background-color: grey;
flex-flow: row wrap;
}
nav>li {
padding: 5px;
flex-basis: auto;
}
main article {}
.foot {}<!DOCTYPE html>
<html lang="en">
<head>
<title>Little Lemon</title>
<link href="styles.css" rel="stylesheet">
</head>
<body>
<header>
<img src="Images/Asset <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="daebee9aeea2f4aab4bd">[email protected]</a>" alt="Little Lemon Logo">
</header>
<nav>
<ul class name="uList">
<li class name="list"><a href="index.html">Home</a></li>
<li class name="list"><a href="menu.html">Menu</a></li>
<li class name="list"><a href="book.html">Book</a></li>
<li class name="list"><a href="about.html">About</a></li>
</ul>
</nav>
<main>
<h1>Main</h1>
<section class="article">section1</section>
<section class="article">section2</section>
<section class="article">section3</section>
</main>
<footer>
<h1 class="foot">footer1</h1>
<h1 class="foot">footer2</h1>
</footer>
</body>
</html>