Dropdown Divs Aligning with Heading Button

I am currently trying to develop a three button system to display the three collectibles within my game's website. I currently have the buttons ready, but the one on the right flies off the screen, and the middle one looks off.

I am trying to create a look in which the left button has the dropdown content as it is, the middle with the dropdown content aligned centre, and the right with the dropdown content mirroring the left one but going from right, to left.

Here is the current screenshots of the three buttons as they are:

Here is the HTML code for the block: https://pastebin.com/mEECfh2T

Here is the CSS code for the block:

#artifactsButton p {
     padding: 5px;
     text-align: center;
   }

#floraButton p {
     text-align: right;
     word-wrap: break-word;

  }

 #collectiblesHeader {
   text-align: center;
  }

 #artifactsButton {
   float: left;
      }

 #floraButton {
   float: right;
   padding-right: 10px;
 }

 #lettersButton {
   float: right;
   padding-right: 290px;
 }

 .dropbtn {
   font-size: 28px; 
   border: none;
   outline: none;
   color: white;
   padding: 14px 16px;
   background-color: inherit;
   font-family: inherit; 
   margin: 0; 
 }

 .navbar a:hover, .dropdown:hover .dropbtn {
   background-color: grey;
 }


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

 .dropdown-content a {
   float: none;
   color: black;
   padding: 12px 16px;
   text-decoration: none;
   display: block;
   text-align: left;
 }

.dropdown-content a:hover {
  background-color: #ddd;
 }

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