按钮居中，但下拉菜单没有

Question

因此，在获得代码帮助之后，在带有自定义html字段的Clickfunnels网站上，标题按钮终于居中了。无论如何，下拉菜单不是在左侧。这是代码：

/* The container <div> - needed to position the dropdown content */


/* Dropdown Button */

.dropbtn {
  position: relative;
  background: transparent;
  color: white;
  padding: 20px;
  width: 150px;
  font-size: 14px;
  border: none;
  font-weight: 900;
  font-family: LATO;
  transition: ease-in-out 0.8s;
  text-align: center !important;
}

.dropdown {
  position: relative;
  text-align: center;
}

.dropdown:hover .dropbtn {
  background: white;
  transition: background ease-in-out 0.5s;
  color: black;
}


/* Dropdown Content (Hidden by Default) */

.dropdown-content {
  position: absolute;
  width: 150px;
  left: -999em;
}

.dropdown:hover .dropdown-content {
  background-color: white;
  left: 0;
  transition: background ease-in-out 0.5s;
  ;
}

.dropdown:hover .dropdown-content {
  display: block;
}


/* Links inside the dropdown */

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  font-size: 15px;
  text-decoration: none;
  display: block;
  text-align: center;
}

<div class="dropdown">
  <button class="dropbtn">JOBS
           </button>
  <div class="dropdown-content">
    <a href="#">GALERIE</a>
    <a href="#">LAGE</a>
  </div>
</div>

我想使下拉按钮居中，并同时使下拉菜单居中。我是一个完全的新手，对CSS和HTML毫无头绪，所以对代码感到抱歉。