如何使用bootstrap 4创建全宽度水平下拉菜单

Question

我正在尝试使用Bootstrap 4创建一个全宽下拉菜单，所以有点像这样。 但是，我在制作全宽并使其成为中心时遇到了问题。

我添加了这个CSS以使下拉水平：

.nav > .dropdown.show {
  position: static;
}

.navbar-nav > .dropdown.show .dropdown-menu {
  display: table;
  border-radius: 0px;
  width: 100% ;
  text-align: center;
  left: 0;
  right: 0;
}

.dropdown-menu > a {
  display: table-cell;
  height: 50px;
  line-height: 50px;
  vertical-align: middle;
}

@media screen and (max-width: 767px) {
  .dropdown-menu > a {
    display: block;
  }
} 

我的问题的代码是https://codepen.io/mrsalami/pen/NzrxdX