I'm attempting to arrange 3 images in a row using flexbox. I also need to adjust the size of the first image because it is too large. However, my CSS styles are not being applied correctly. Each image is enclosed in its own div with a class of flex-item-3 to indicate that they are flex items inside the flex container. Despite this, I am struggling to override the default CSS settings.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
font-family: 'Lato', 'sans-serif', 'arial';
color: #fff;
font-size: 15px;
font-weight: 300;
text-transform: uppercase;
text-rendering: optimizeLegibility;
}
.wrapper {
max-width: 100%;
margin: 0 auto;
}
section {
padding: 80px 0;
}
h2 {
margin: 0;
padding: 0;
}
.flex {
display: flex;
justify-content: space-between;
background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("img/truck.jpg");
background-size: cover;
background-position: center;
}
.flex-item {
padding-top: 15px;
height: 100vh;
}
.item1 {
padding-top: 0;
padding-left: 30px;
}
.logo {
height: 90px;
}
.main-nav ul {
display: flex;
margin: 0;
padding: 0;
list-style: none;
}
.main-nav a {
color: white;
padding: 1rem;
text-decoration: none;
}
.main-nav a:hover {
color: orange;
}
.hero {
position: absolute;
top: 50%;
left: 25%;
transform: translate(-50%, -50%);
}
.hero a {
text-decoration: none;
color: white;
display: block;
margin: 10px;
padding: 10px;
border-radius: 10px;
}
.btn {
background-color: orange;
}
.flex2 {
display: flex;
justify-content: center;
align-items: center;
}
.flex-item-2 {
color: #312c2c;
width: 100%;
text-align: center;
}
.second-flex-item p {
margin-top: 20px;
margin-bottom: 40px;
font-size: 19px;
color: #312c2c;
}
.second-flex-item h2 {
font-weight: 900;
font-size: 25px;
}
.flex-3 {
display: flex;
justify-content: center;
max-width: 100%;
}
.flex-3-items {
display: flex;
width: 100%;
height: auto;
}<body class="wrapper">
<header class="flex">
<div class="flex-item item1">
<img src="Resources/img/moBurgerzLogo.png" class="logo">
</div>
<nav class="flex-item main-nav">
<ul>
<li><a href="#">Our Story</a></li>
<li><a href="#">Locations</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Order now</a></li>
</ul>
</nav>
<div class="hero">
<h2>Best Burgers <br> In DA City(D.C)</h2>
<a href="#" class="btn" btn-full>Order now!</a>
<a href="#" class="btn" btn-ghost>View Menu!</a>
</div>
</header>
<section class="flex-2">
<div class="flex-item-2 second-flex-item">
<h2>Established in 2017 in D.M.V</h2>
<p class="story"> moBurgerz was founded in 2017 by owner Mahamed Ibrahim.<br> Since then we have been serving the best hand crafted burgers in the D.M.V.<br>All our meat is halal and all of our ingridients are organic.</p>
<img src="Resources/img/white_truck.jpeg" class="truck-img">
</div>
</section>
<section class="flex-3">
<div class="flex-3-item meal-photos photo-1">
<img src="Resources/img/cheeseSteak.jpg">
</div>
<div class="flex-3-item meal-photos">
<img src="Resources/img/goodMoanin.jpeg">
</div>
<div class="flex-3-item meal-photos">
<img src="Resources/img/moGul.jpeg">
</div>
</section>
</body>