button is very tall and can't change the height

Question

I have a menu button and everything is working nicely. However the button appears quite tall on my page. Even in my fiddle example I can't seem to change the height no matter what I change, why?

I can't see anywhere a height specified either?

  * {
      margin: 0px;
      padding: 0px;
    }

    body {
     background-color: lightblue;
    }

    .navbar {
    width: 50%;
    display: block;
    margin: 50px auto;
    padding: 8px 10px;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    }

    .navbar div {
    height: 5px !important;
    background: #fff;
    margin: 7px 0px 7px 0px;
    border-radius: 25px;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    }

    .two {
    width: 35px;
    }

    .three {
    width: 50px;
    }

    .navbar:hover div {
     width: 60px;
    }

     .dropdown {
      position: relative;
      display: inline-block;
     }

      .dropbtn {
      background-color: #9FACEC;
      color: white;
      padding: 16px;
      font-size: 16px;
      border: none;
      width: 100%;
     }

     .dropbtnSub {
       background-color: #f1f1f1;
       color: black;
       padding: 16px;
       font-size: 16px;
       border: none;
       width: 100%;
     }

     .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f1f1f1;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1;
     }

      /* Links inside the dropdown */
     .dropdown-content li {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
      position: relative;
      }

      /* Change color of dropdown links on hover */
     .dropdown-content li:hover {background-color: #ddd;}

     .dropbtnSub-content:hover {background-color: #4C66E9;}

     /* Show the dropdown menu on hover */
     .dropdown:hover .dropdown-content {display: block;}

     .dropdown:hover .dropbtn {background-color: #4C66E9;}

     .dropdown-content-list {
      display: none;
     }

     .dropdown-content-list:hover {
       display: block !important;
      }

     .dropdown-content-li:hover .dropdown-content-list {
      display: block;
      position: absolute;
      left: 100%;
      top: 0;
      background: #efefef;
     }

<div class="dropdown">
  <button class="dropbtn">
  <div class="navbar">
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
  </div>
  </button> 
  <div class="dropdown-content">
    <ul>
      <li class="dropdown-content-li">
          <button class="dropbtnSub" value="Region">Country</button>
          <div class="dropdown-content-list">
            <ul>
              <li>Japan</li>
              <li>South America</li>
              <li>Europe</li>
            </ul>
          </div>
      </li>
      <li class="dropdown-content-li">
      <button class="dropbtnSub">Export</button>
          <div class="dropdown-content-list">
            <ul>
              <li>Excel</li>
              <li>CSV</li>
            </ul>
          </div>
      </li>
    </ul>
  </div>
</div>

Answer 1

change from .navbar {margin:50px auto;} to .navbar{margin:0px auto;} or you can also use -5px auto for smaller size of button

Answer 2

Put margin: 0 auto on .navbar.

Answer 3

Try changing margin applied in your custom class navbar from 50px to 0px

  * {
      margin: 0px;
      padding: 0px;
    }

    body {
     background-color: lightblue;
    }

    .navbar {
    width: 50%;
    display: block;
    margin: 0px;
    padding: 8px 10px;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    }

    .navbar div {
    height: 5px !important;
    background: #fff;
    margin: 7px 0px 7px 0px;
    border-radius: 25px;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    }

    .two {
    width: 35px;
    }

    .three {
    width: 50px;
    }

    .navbar:hover div {
     width: 60px;
    }

     .dropdown {
      position: relative;
      display: inline-block;
     }

      .dropbtn {
      background-color: #9FACEC;
      color: white;
      padding: 16px;
      font-size: 16px;
      border: none;
      width: 100%;
     }

     .dropbtnSub {
       background-color: #f1f1f1;
       color: black;
       padding: 16px;
       font-size: 16px;
       border: none;
       width: 100%;
     }

     .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f1f1f1;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1;
     }

      /* Links inside the dropdown */
     .dropdown-content li {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
      position: relative;
      }

      /* Change color of dropdown links on hover */
     .dropdown-content li:hover {background-color: #ddd;}

     .dropbtnSub-content:hover {background-color: #4C66E9;}

     /* Show the dropdown menu on hover */
     .dropdown:hover .dropdown-content {display: block;}

     .dropdown:hover .dropbtn {background-color: #4C66E9;}

     .dropdown-content-list {
      display: none;
     }

     .dropdown-content-list:hover {
       display: block !important;
      }

     .dropdown-content-li:hover .dropdown-content-list {
      display: block;
      position: absolute;
      left: 100%;
      top: 0;
      background: #efefef;
     }

<div class="dropdown">
  <button class="dropbtn">
  <div class="navbar">
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
  </div>
  </button> 
  <div class="dropdown-content">
    <ul>
      <li class="dropdown-content-li">
          <button class="dropbtnSub" value="Region">Country</button>
          <div class="dropdown-content-list">
            <ul>
              <li>Japan</li>
              <li>South America</li>
              <li>Europe</li>
            </ul>
          </div>
      </li>
      <li class="dropdown-content-li">
      <button class="dropbtnSub">Export</button>
          <div class="dropdown-content-list">
            <ul>
              <li>Excel</li>
              <li>CSV</li>
            </ul>
          </div>
      </li>
    </ul>
  </div>
</div>