I am currently working on a gallery website and facing an issue with the menu placement. I want to position the menu items on the right side of the images, but they keep appearing at the bottom instead. Despite adjusting the width in classes like gallerymenu and menutyle, the problem persists. Can anyone suggest a solution to achieve the desired layout?
<body class="galleryStyle">
<div class="galleryGrid">
<div class="galleryContainer">
<div>
<a href="google.com.html">
<img src="https://upload.wikimedia.org/wikipedia/en/2/23/Philipgiaccone1.JPG" alt="google">
</a>
</div>
</div>
<div class="galleryContainer">
<div>
<a href="google.com.html">
<img src="https://upload.wikimedia.org/wikipedia/commons/1/19/Delfini-Milian_cropped.png" alt="google">
</a>
</div>
</div>
</div>
<div class="galleryMenu">
<div class="menuStyle">
<a href="google.com">
<p>google</p></a>
</div>
<div class="menuStyle">
<a href="google.com">
<p>google</p></a>
</div>
.galleryStyle {
color: grey;
width: 100%;
background: white;
}
.galleryContainer {
height: auto;
width: 15%;
margin: 10px;
padding: 15px;
}
.galleryGrid {
display: grid;
grid-template-columns: repeat(2, 8fr);
padding: 5px;
margin: 10px;
height: 100%;
width: 60%;
}
.galleryMenu {
height: 30%;
}
.menuContainer>div {
font-size: 2vw;
text-align: center;
border-radius: 5px;
box-shadow: 8px 13px black;
margin: 50px;
height: 50%;
width: 40%;
}
.menuStyle {
display: flex;
align-items: center;
justify-content: center;
background: red;
margin: 10px;
}