title: How can I remove the padding and center this element?
body: <p>I've been trying to center and remove the bottom-padding of the 'filter' image for a couple hours now but can't seem to do it. It's probably a really simple fix, but I'm pretty new to CSS, HTML and flexbox and the solution has escaped me so far! If someone could point me in the right direction, that would be awesome. </p>
  
  <p><img src="https://i.stack.imgur.com/XrECn.jpg" alt="Screenshot "></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang='en'&gt;
    &lt;head&gt;
      &lt;meta charset='UTF-8'/&gt;
      &lt;title&gt;Some Web Page&lt;/title&gt;
      &lt;link rel='stylesheet' href='styles.css'/&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div class='menu-container'&gt;
        &lt;div class='menu'&gt;
          &lt;div class='links'&gt;
            &lt;div class='signup'&gt;Sign Up&lt;/div&gt;
            &lt;div class='login'&gt;Login&lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class='header-container'&gt;
        &lt;div class='header'&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;main&gt;
        &lt;input id="toggle" type="checkbox"&gt;
        &lt;label for="toggle"&gt;
            &lt;div class="filterbutton"&gt;&lt;img src='images/filterbutton.svg'/&gt;&lt;/div&gt;
        &lt;/label&gt;
        &lt;div id="expand"&gt;
          &lt;section class="Filter"&gt;
          &lt;/section&gt;
        &lt;/div&gt;
      &lt;/main&gt;
      &lt;section class="carousel"&gt;
      &lt;/section&gt;
    &lt;/body&gt;
    &lt;footer&gt;
        &lt;img src="images/facebook.svg" alt="facebook" title="facebook" href="#" class="social"&gt;
        &lt;img src="images/twitter.svg" alt="twitter" title="twitter" href="#" class="social"&gt;
        &lt;img src="images/instagram.svg" alt="instagram" title="instagram" href="#" class="social"&gt;
        &lt;img src="images/snapchat.svg" alt="snapchat" title="snapchat" href="#" class="social"&gt;
        &lt;ul&gt;
            &lt;a alt="about" title="About" href="#" class="footerlink"&gt;About&lt;/a&gt;
            &lt;a alt="about" title="About" href="#" class="footerlink"&gt;Contact&lt;/a&gt;
            &lt;a alt="about" title="About" href="#" class="footerlink"&gt;Team&lt;/a&gt;
            &lt;a alt="about" title="About" href="#" class="footerlink"&gt;Whatever&lt;/a&gt;
        &lt;/ul&gt;
    &lt;/footer&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>* {
    margin: 0;
    padding: 0;
  }
  
  .button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
  }
  
  .menu-container {
    color: #fff;
    background-color: #A34F43;
    padding: 20px 0;
    display: flex;
    justify-content: space-between;
  }
  
  .menu {
    width: 100%;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
  }
  
  .links {
    display: flex;
    justify-content: flex-end;
  }
  
  .login {
    margin-left: 20px;
  }
  
  .header-container {
    background-color: #FF7C69;
    display: flex;
    justify-content: center;
  }
  
  .header {
    width: 100%;
    height: 300px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .carousel-test {
    display: flex;
    justify-content: center;
  }
  
  .carousel-grid-container {
    display: flex;
    justify-content: center;
  }
  
  .carousel-grid {
    width: 900px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }
  
  .logo {
    width: 200px;
    display: block;
    margin: 0 auto;
  }
  
  @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
  
  body {
    font-family: "Open Sans", Arial;
    width: 100%;
  }
  main {
    background: #FF7C69;
    width: 100%;
    margin: 0px auto;
  }
  
  input {
    display: none;
    visibility: hidden;
  }
  label {
    /* display: block; */
    /* text-align: center; */
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
  }
  label:hover {
    color: #000;
  }
  
  #expand {
    height: 0px;
    overflow: hidden;
    transition: height 0.3s;
    background-color: #D6DBED;
    color: #FFF;
  }
  
  #toggle:checked ~ #expand {
    height: 250px;
  }
  
  footer {
    background-color: #A34F43;
    text-align: right;
    color: #eee;
    text-align: center;
    position: absolute;
    width: 100%; 
    /* display: flex; */
  }
  
  .footerlink {
    text-decoration: none;
    color: white;
    text-align: justify;
    display: block;
    padding: 1px;
  }
  
  .social {
    padding: 10px;
    width: 50px;
    text-align: right;
    float: right;
  }
  
  .social:hover {
    opacity: 0.7;
  }
  
  legend {
    background-color: #000;
    color: #fff;
    padding: 3px 6px;
  }
  
  .output {
    font: 1rem 'Fira Sans', sans-serif;
  }
  
  input {
    margin: .4rem;
  }
  
  .filterbutton {
    margin: 0px;
    padding: 0px;
    width: 150px;
    display: block;
  }
  </code></pre>