HTML element not centering

My gender-reg (child of register-page isn't centering) it stays to the very left for some reason? i need it centered!

HTML:       
<div class="gender-reg">
        <selection-dropdown params="all: allGenderChoices"></selection-dropdown>
      </div>

.register-page {
  width: 100%;
  height: 100%;
  margin: auto;
  text-align: center;

      .gender-reg {
      border: solid yellow;
      @include scale-to-screen((
        margin-bottom: 10px
      ))
    }

basically what happens is everything else on the page is centered, except this element. I have zero idea as to why! usually margin: auto centers it. I'm stuck!