Centering some buttons

I am a beginner-ish front end Developer, and I have done something with my css stylesheet that whatever I do I cant seem to get my buttons on the page to be aligned as if it was a calculator? I know many of you would know this so, thank you for your help forward.

.mainContent button {
  font-family: inherit;
  padding: 1em 2em;
  border: 3px solid black;
  width: 2em;
  background-color: #edf2fb;
  color: black;
  border-radius: 0.35em;
  font-size: 1.2em;
  margin: 0.1em auto;
  display: flex;
  justify-content: center;
}

<section class="mainContent">
  <button id="result">Result</button>
  <button id="clear">C</button>
  <button id="one">1</button>
  <button id="two">2</button>
  <button id="three">3</button>
  <button id="four">4</button>
  <button id="five">5</button>
  <button id="six">6</button>
  <button id="seven">7</button>
  <button id="eight">8</button>
  <button id="nine">9</button>
  <button id="zero">0</button>
  <button id="plus">+</button>
  <button id="minus">-</button>
  <button id="multiply">*</button>
  <button id="divide">/</button>
  <button id="equal">=</button>
  <button id="comma">,</button>
  <input type="text" placeholder="Your calculations">
</section>

How do you do this? They are just lined up in the center one by one going down!

I tried all this justify content, text align, grid but I cant seem to get any to work

Solution

.mainContent button {
    font-family: inherit;
    border: 3px solid black;
    padding: 25px;
    margin: 10px;
    width: 10em;
    background-color: #edf2fb;
    color: black;
    border-radius: 0.35em;
    font-size: 1.2em;
    text-align: center;
}

.mainContent {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

<!-- 
Online HTML, CSS and JavaScript editor to run code online.
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="style.css" />
  <title>Browser</title>
</head>

<body>
  <input type="text" placeholder="Your calculations">
  <section class="mainContent">
        <button id="result">Result</button>
        <button id="clear">C</button>
        <button id="one">1</button>
        <button id="two">2</button>
        <button id="three">3</button>
        <button id="four">4</button>
        <button id="five">5</button>
        <button id="six">6</button>
        <button id="seven">7</button>
        <button id="eight">8</button>
        <button id="nine">9</button>
        <button id="zero">0</button>
        <button id="plus">+</button>
        <button id="minus">-</button>
        <button id="multiply">*</button>
        <button id="divide">/</button>
        <button id="equal">=</button>
        <button id="comma">,</button>
        
    </section>
  <script src="script.js"></script>
</body>

</html>