https://i.sstatic.net/F7dXv.png
My goal is to align the left and right margins equally. I have a set of nft cards that I want to display in a grid format, similar to the image provided. However, I am having trouble centering them on the page. I simply want to showcase them in a clean grid layout.
<div className="a-nfts">
<div className="a-nft-card">A</div>
<div className="a-nft-card">A</div>
<div className="a-nft-card">A</div>
<div className="a-nft-card">A</div>
<div className="a-nft-card">A</div>
<div className="a-nft-card">A</div>
<div className="a-nft-card">A</div>
<div className="a-nft-card">A</div>
</div>
//css
.a-nft-card{
display: inline-block;
height: 400px;
width: 300px;
background-color: #000309;
border-radius: 10px;
border: white 1px solid;
}
.a-nfts{
width: 60%;
border: 1px solid white;
margin: auto;
}