Text-align: center, with wrapper, Input Boxes & Button not centering themselves but logo centers fine

Question

On this page I have a logo (image file, with a set height to fit better) which centers itself fine in its own div. This logo is wrapped in a wrapper div with text-align: center and centers fine. There are also 2 text input boxes with a search button wrapped in a separate div from the logo's, and they're also wrapped in the wrapper div, but when I load the page that div appears on the left side of the page.

If I comment out the searchArea div so the button and boxes are surrounded only by the wrapper, everything centers fine but gets stretched out because of the width property.

How do I get everything inside the searchArea div to center under the logo without losing the set styles for the searchArea class???

HTML:

<div id="logo" class="centerWrapper">
    <img id="logo" class="logo" src="img/TestAPICropped.png" alt="logo">
</div>

<div id="search" class="centerWrapper">
    <div id="searchArea" class="searchArea">
        <input type="text" class="inputBox" name="charName" placeholder="Character Name"><br>
        <input type="text" class="inputBox" name="realmName" placeholder="Realm Name"><br>
        <button type="button" class="searchButton">Search</button>
    </div>
</div>

CSS:

.centerWrapper {
    text-align: center;
}
.logo {
    height: 46px;
}
.searchArea{
    margin-top: 0.8%;
    height: 125px;
    width: 340px;
}
input.inputBox {
    background-color: #0B122F;
    border-color: #877055;
    color: #4A4E5A;
    margin: 5px 0px;
    padding: 5px 10px 5px 10px;
    width: 72%;
}

Answer 1

In order to horizontally center block-level elements like <div>, you're looking to the apply the margin-left and marign-right properties, both with auto values.

Normally you can use the shorthand margin: 0 auto, but considering you have a margin-top of 0.8%, you need to specify both manually for your .searchArea selector.

This can be seen in the following:

.centerWrapper {
  text-align: center;
}

.logo {
  height: 46px;
}

.searchArea {
  margin-top: 0.8%;
  height: 125px;
  width: 340px;
  margin-left: auto;
  margin-right: auto;
}

input.inputBox {
  background-color: #0B122F;
  border-color: #877055;
  color: #4A4E5A;
  margin: 5px 0px;
  padding: 5px 10px 5px 10px;
  width: 72%;
}

<div id="logo" class="centerWrapper">
  <img id="logo" class="logo" src="img/TestAPICropped.png" alt="logo">
</div>

<div id="search" class="centerWrapper">
  <div id="searchArea" class="searchArea">
    <input type="text" class="inputBox" name="charName" placeholder="Character Name"><br>
    <input type="text" class="inputBox" name="realmName" placeholder="Realm Name"><br>
    <button type="button" class="searchButton">Search</button>
  </div>
</div>

Hope this helps! :)