How do I get submenu to appear centered under dropdown menu option?-CodePudding

I am trying to code a non full-size horizontal submenu under a main menu navigation link. For some reason, the submenu boxes are not appearing to be the same size even though they have identical text. And the submenu is not centering under the dropdown menu link (PRODUCTS).

This is an image of what I am trying to achieve when the user hovers over products:

Here is a link to my codepen.io pin.

Here is the html from the codpen.io pin:

    <header>
  <div >
    <div >
      <div >
       <p>LOGO</p>
      </div>
    </div>
    <div >
      <nav>
        <ul >
          <span >
          <li>Products
          <span >
            <i ></i>
            </span></span>
            <span >
            <ul >
              <li ><span >Sub</span><p >Lorem ipsum dolor</p></li>
              <li class"item2"><span >Sub</span><p >Lorem ipsum dolor</p></li>
            </ul>
            </span>
          </li>
          <li>Resources</li>
          <li>Company</li>
          <li>Careers</li>
          <li>Contact Us</li>
        </ul>
      </nav>
    </div>
  </div>
</header>

Here is the CSS:

.main-navigation-bar {
  height: 94px;
  background-color: #00000000;
  display: flex;
}

.section-1 {
  width: 30%;
}

.section-2 {
  width: 70%;
  justify-content: flex-end;
  margin-left: auto; 
  margin-right: 0;
  flex-wrap: wrap;
  display: flex;
}

.main-nav {
  list-style-type: none;
  overflow: hidden;
  display: block;
 
}

.main-nav li{
  float: left;
  padding: 10px 20px 10px 20px;
  font-size: 14px;
   font-weight: 700;
   text-transform: uppercase;
   font-style: normal;
   text-decoration: none;
   line-height: 24px;
   letter-spacing: .75px;
}

.sub-menu {
  list-style-type:none;
  overflow:hidden;
  display: flex;
  position: static;
  height: auto !important;
  box-shadow: 0px 0px 2px 0px rgb(30 30 30 / 25%) !important;
  z-index: 3px;
  border-radius: 8px;
  position: relative;
}

.dropdown-content {
  display: none;
  position: absolute;
  z-index: 1;
}

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


.sub-menu li {
  float: left;
  padding: 24px 32px !important;
}

.item1 {
  border-right: 1px solid #f2f2f2;
}

.product {
  display: block;
  font-size: 20px;
  font-weight: 700px;
  color: red;
}

.tagline {
  display: block;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: .44px;
  text-transform: none;
}

Any help would be greatly appreciated. Thanks!

CodePudding user response：

Just add transform: translateX(calc(-50% 20px)); to span with class .dropdown-content

CodePudding user response：

or you can use it

dropdown-content {

  transform: translateX(50%); left: 50%;

  display: none;

  position: absolute;

  z-index: 1;
}