Unable to center the elements

So, I am new at coding. I was trying to make a very basic static webpage of a calculator using html and css and js.

This is the html

#input {
    margin: 0 auto;
}

#num {
    border-radius: 25px;
    background: #73AD21;
    display: inline-block;
    padding: 15px;
    width: 200px;
    height: 100px;
}

<body>
  <div id="input">
    <div id="num">
      <label for="num1">Enter the first number</label>
      <input type="number" name="num1" id="num1">
    </div>
    <div id="num">
      <label for="num2">Enter the second number</label>
      <input type="number" name="num2" id="num1">
    </div>
  </div>
  <div id="op">
    <div id="opadd"><input type="submit" name="add" class="add" value="Add" onclick="add()"></div>
    <div id="opsbtrct"><input type="submit" name="subtract" class="sbtrct" value="Subtract" onclick="sbtrct()"></div>
    <div id="opmult"><input type="submit" name="multiply" class="mult" value="Multiply" onclick="mult()"></div>
    <div id="opdvde"><input type="submit" name="divide" class="add" value="Divide" onclick="dvde()"></div>
  </div>
</body>

I want that the #num be centered horizontally. I tried using

margin: auto;

and

margin: 0 auto;

but nothing works. Please help.

I've been at it for hours.

Solution

when you add margin: 0 auto be sure the html tag not inline or inline-block it should be 'block' css with specific width.

#num {
    border-radius: 25px;
    background: #73AD21;
    display: block;
    padding: 15px;
    width: 200px;
    height: 100px;
    margin: 1em auto;    
}
label{
  white-space: nowrap;
}

just replace this code hope your problem will fix. add white-space:nowrap for the label to use one line text. #num should be 'block' css with specific width like 200px and display block. thanks