title: button heights not matching
body: <p>I am making a website for my college course and I am having problems getting the button heights in my slide show to match up. I was wondering if anyone could give me a clue as to how to get them both to be at the same height?</p>
  
  <p>This is my css for the slide show:</p>
  
  <p>/<em>=== SLIDESHOW SECTION ===</em>/</p>
  
  <pre><code>#container
  {
      width: 90%;
      height: 700px;
      border: none;
      margin: 0 auto;
      position: relative;
  
  }
  
  #container &gt; img
  {
      width: 100%;
      height: 100%;
      position: absolute;
  }
  
  #container &gt; .btn
  {
      position: absolute;
      width: 50px;
      height: 50px;
      border: none;
      border-radius: 25px;
      top: 350px;
      background: #000000;
      color: #ffffff;
      font-size: 20px;
  }
  
  #container&gt;#btn1:hover
  {
      box-shadow: 10px 0px 20px 0px #343d46 ;
  }
  #container&gt;#btn2:hover
  {
      box-shadow: -10px 0px 20px 0px #343d46;
  }
  
  #container&gt;#btn2
  {
      position: relative;
      float: right;    
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/y9tXs.jpg" rel="nofollow noreferrer">picture of the problem</a></p>