title: How do I center my search-bar and button horizontally in the middle of the page?
body: <p>I've tried setting the following properties to my  element ,"margin:0 auoto;" and "text-align:center;", however, none seem to be working.</p>
  
  <pre><code>&lt;div id="searchBarWrap"&gt;
          &lt;input id="searchBar" type="text" name="searchbar" placeholder="Search &amp; Explore..."/&gt;
          &lt;button id="searchBtn"&gt;&lt;i class="fa fa-search"&gt;&lt;/i&gt;&lt;/button&gt;
      &lt;/div&gt;
  
      #searchBarWrap{ 
          display:inline-flex;
      }
  
  
      #searchBar{
          border:#BA4A00 solid;
          border-width: .2em;
          border-radius: .7em 0 0 .7em;
          padding: .2em .2em .2em .5em;
          width: 225px;
      }
  
      #searchBtn{
          border:#BA4A00 solid;
          border-width: .2em;
          border-radius: 0 .7em .7em 0;
          background-color: #BA4A00;
          color:white;
          font-weight:bold;
          padding-bottom: .2em;
  
      }
  </code></pre>