title: Make a Button Responsive and Centered Horizontally
body: <p>I'm currently working on a website and I'm trying to make a button that is centered and responsive but it is just not working!</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="button-container"&gt;
    &lt;button id="who-are-we" class="font-spec"&gt;quem somos&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#button-container {
      width: 120px;
      display:block;
      position:relative;
      margin-top: 100px;
      margin-left: 50%;
      text-align: center;
      height: auto;
    }
  
  #who-are-we {
      font-family: Volkorn;
      background: white;
      border: 4px solid black;
      cursor: pointer;
      max-width: 180%;
      max-height: 100%;
      width:220px;
      height: 70px;
      font-size: 200%;
      text-align: center;
    }
  </code></pre>
  
  <p>I tried messing with the margins but there must be a simpler way of doing this, I am also trying to make the button smaller when the window gets smaller.</p>