Search box center

So one of the problems in your code is that you have set your outer layer box class to 50 pixel width, however by default an input's width is much greater than that. So what you need to do is use something called max-width to your outer layer this will limit its width to a maximum of 150px in my solution. Then you set the width of that box to 100% so that the browser by default goes to that limitation u set. If you use this and shrink the screen it will also work because it adjusts to a users screensize using a percentage value. Lastly set your input width to 100% to adjust with the outer layer box so it also is responsive. You can play around with this if you'd like I hope it helps :)

Solution:

HTML:

<div class="box"> 
  <div class="container-1"> 
    <input type="search" id="search" placeholder="Search..."> 
  </div> 
</div>

CSS:

.box { 
  margin: 20px auto;
  width: 100%;
  max-width: 150px;
  height: 40px; 
  text-align: center; 
}

.box .container-1 input{
   width: 100%;
}