title: How can I make the input search bar, microphone image and two small boxes responsive?
body: <p>After submitting my exercise for The Odin Project. I had thought that everything was aligned and centered when viewed on my MacBook Pro 15inch. But when I looked at the completed webpage at work on a bigger computer screen, I noticed that the input search box wasn't centered anymore. Along with that, the microphone image that sits inside of the search box and the two grey buttons below it are floating into space when the window is resized.</p>
  
  <p>Instead of re-writing the exercise over. I tried to place the form box, the microphone image and the two buttons inside their own Divs to see if that would help with centering the box, but no luck. I've also played around with flexbox, margin: 0 auto, and setting the widths differently, but nothing.</p>
  
  <p>You can check it out here:
  <a href="https://lawsin-google-homepage.netlify.com/" rel="nofollow noreferrer">https://lawsin-google-homepage.netlify.com/</a></p>
  
  <p>Code for the project is here:
  <a href="https://repl.it/@jl88s/RoyalblueFarTrust" rel="nofollow noreferrer">https://repl.it/@jl88s/RoyalblueFarTrust</a></p>
  
  <pre><code>&lt;section class="main-container"&gt;
  
          &lt;h1 class="google-logo-header"&gt;Google&lt;/h1&gt;
          &lt;img src="google-logo.svg" alt="google-logo" id="google-logo"&gt;
  
          &lt;form action="/action_page.php"&gt;
              &lt;input class="form-box" type="text" name="search"&gt;
              &lt;a href="#"&gt;&lt;img src="google-mic.png" id="google-mic" alt="microphone"&gt;&lt;/a&gt;
          &lt;/form&gt;
  
          &lt;button class="btn-one buttons"&gt;Google Search&lt;/button&gt;
          &lt;button class="btn-two buttons"&gt;I'm Feeling Lucky&lt;/button&gt;
  
  &lt;/section&gt;
  </code></pre>
  
  <p>What I expect is whenever I resize the window, I would like for the search box, mic, and the buttons to be centered and responsive to the size of the screen.</p>