I attempted to create a basic landing page featuring an image background with a logo, button, and a row of 4 images displayed side by side using Flex. However, for some reason, the Flex is not functioning properly for the row of images.
Here is the code snippet for my page:
body, html {
height: 100%;
margin: 0;
}
.bg {
background-image: url("/img/gibson-bg.jpg");
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.heading {
background: #000;
height: 100px;
}
.button {
color: white;
border-radius: 50px;
background-color: #1F4A5D;
border: 2px solid white;
display:block;
padding: 20px 30px;
text-decoration:none;
}
.interiors {
display: flex;
column-gap: 15px;
}
.interiors div {
flex: 1 1 23%;
}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="bg">
<div class="heading">
<img alt="gibson logo" src="https://placehold.co/2000x1600">
</div>
<div class="buttonContainer">
<a href="https://www.choicehotels.com/montana/great-falls/ascend-hotels/mt123" target="_blank" class="button">BOOK A ROOM TODAY</a>
</div>
<div class="interiors">
<div><img src="https://placehold.co/900x600"></div>
<div><img src="https://placehold.co/900x600"></div>
<div><img src="https://placehold.co/900x600"></div>
<div><img src="https://placehold.co/900x600"></div>
</div>
</div>
</body>
</html>The provided code showcases my attempt with placeholders. Visit this link for the actual page.
Both versions demonstrate the issue where the row of photos appears larger than intended despite applying a flex value of 25% to each item in the grid.
This is the look I was aiming for: https://i.stack.imgur.com/L62tB.png