how to I get my flexbox buttons to match my flexbox images in css?

Question

Im trying to put spaces in between my images and my buttons underneath and centre to my images. At the moment my images are squashed together but my buttons have small gaps in between. Im trying to make these gaps bigger. Below is my js file and my css file. Any ideas on how I do this? Thanks in advance

import React from "react";
import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
import './Homepage.css';
import Accessories from './Accessories';
import DigitalPhotographs from './DigitalPhotographs';
import Fashion from './Fashion';
import Footwear from './Footwear';
import Jewellery from './Jewellery';
import Art from './Art';

function Homepage() {

return(

 <>
 <h3>Welcome to Luminous Butter. We dont sell Butter

 we do sell vintage, Customised and pre-loved Fashion


  Original Artwork


  Plus, we have a great blog which has original stories and writing to keep you 
 entertained

 </h3>
  <div class= "container">
 <div class= "image">
        <img src="images/Fred.jpeg" alt="accessories" class= "rounded" 
      width="280px"/>
        <img src="images/BlackonBlack.jpg" alt="photography" class= "rounded" 
      width="500px"/>
        <img src="images/Boy.jpeg" alt="fashion" class= "rounded" width="300px"/>
      </div>
      </div>
       <div class= "container">
         <div class= "buttons">
          <Link to="/Accessories"><button type="button">Accessories</button></Link>
              <Link to="/DigitalPhotographs"><button type="button">Digital 
             Photographs</button></Link>
              <Link to="/Fashion"><button type="button">Fashion</button></Link>
    </div>
    </div>
     <div class= "container">
     <div class= "image">
    <img src="images/Campbell.jpeg" alt="footwear" class= "rounded" width="400px"/>
   <img src="images/Scandal.jpeg" alt="jewellery" class= "rounded" width="300px"/>
    <img src="images/bowiebig.jpeg" alt="art" class= "rounded" width="300px"/>
   </div>
  </div>
 <div class= "container">
 <div class= "buttons">
  <Link to="/Footwear"><button type="button">Footwear</button></Link>
   <Link to="/Jewellery"><button type="button">Jewellery</button></Link>
   <Link to="/Art"><button type="button">Art</button></Link>
  </div>
 </div>
 <div class= "container">
 <form action="">
  <h1> Sign-Up to Our Monthly Newsletter</h1>
 </form>
 <img src="images/email-icon.jpeg" alt="email subscribe icon" class= "rounded" 
  width="132px"/>
 <div class= "email-box">
 <input type= "email" name=""  value="" placeholder="Please Enter Your E-Mail"> 
</input>
<button type="button">Subscribe</button>

 </div>
 </div>
  </>
  );
 }
export default Homepage;

and my css page

h3{
text-align: center;
margin: 5%;
}

.container{
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
 justify-content: space-around;
 }

.container .button
 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
   justify-content: space-around;
    }

Answer 1

You're setting the display: flex and justify-content: space-around to your .container class, but not to your .image class. Whether delete the .image wrapper div or add the same styles to it.