I can't center my div and make him responsive

Question

I'm making school project in html and css, and all the upper parts above the buttons are centered and responsive, but the buttons are not centered (I had to change the width to 60%) and they are not responsive, Any help would be appreciated.

enter image description here

Here is the css code:

.Sports-type{
    padding: 10px;
    width: 60%;
    margin: auto;
    text-align: center;
    display: grid;
    grid-template-columns: auto auto auto;
}

I tried to use different display commands and play with the width, padding, and margin, But not results.

Answer 1

You can replace the display: grid with display: flex to center the buttons and make them responsive.

.Sports-type {
    padding: 10px;
    width: 60%;
    margin: auto;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around; /* Adjust as needed */
}

.Sports-type button {
    width: calc(33.33% - 20px); /* Adjust the width and spacing as needed */
    margin: 10px; /* Adjust the margin as needed */
}