How do I center my divs and make them stack with media query

Question

So I have this which is supposed to be side by side in the middle before the media query hits and then when it hits it should stack on top of each other. I have no idea why it's behaving th way it is.

I tried making it centered when ti's at its full width but it doesnt want to center and when I make the browser less than 400px they stack weirdly, they do stack on top but not centered.

.wrapper { 
    margin-top: 15%;
    border : 2px solid #000; 
    overflow:hidden;
  }
  
  .wrapper div {
     min-height: 300px;
     padding: 10px;
  }
  #one {
    background-color: orange;
    float:left; 
    display: inline;
    margin-left: 30%;
    height: 400px;
    width:250px;
    border-right:2px solid #000;
  }
  #two { 
    background-color: orange;
    float:left; 
    margin-right:30px;
    height: 400px;
    width:250px;
    border-right:2px solid #000;
  }
  
  @media screen and (max-width: 400px) {
     #one { 
      float: none;
      margin-right:0;
      bottom: 10%;
      border:0; 
    }

    #two { 
        float: none;
        margin-right:0;
        bottom: 10%;
        border:0;  
      }
  }

<div class="wrapper">
        <div id="one">one</div>
        <div id="two">two</div>
    </div>

Answer 1

Use flexbox and you can easily do this without the need of media query:

.wrapper {
  margin-top: 15%;
  border: 2px solid #000;
  display: flex;
  justify-content: center; /*center the element*/
  flex-wrap: wrap; /*make them above each other when they cannot fit in one row*/
}

.wrapper div {
  min-height: 300px;
  padding: 10px;
  background-color: orange;
  height: 400px;
  width: 250px;
  border: 2px solid #000;
}

<div class="wrapper">
  <div id="one">one</div>
  <div id="two">two</div>
</div>

You can also use inline-block instead of float:

.wrapper {
  margin-top: 15%;
  border: 2px solid #000;
  overflow: hidden;
  text-align:center;
}

.wrapper div {
  min-height: 300px;
  padding: 10px;
}

#one {
  background-color: orange;
  display: inline-block;
  height: 400px;
  width: 250px;
  border-right: 2px solid #000;
}

#two {
  background-color: orange;
  display: inline-block;
  height: 400px;
  width: 250px;
  border-right: 2px solid #000;
}

<div class="wrapper">
  <div id="one">one</div><div id="two">two</div>
</div>