Ufdjrw

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 website with the 'Collectibles' section a little ways down the home page:
https://timeandtimeagain.manakeep.com/

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;

The first thing to do is to set the .dropdown class the position: relative;.
Then you can work with the absolute attribute.

Example:

.dropdown 
 position: relative;


#artifactsButton .dropdown .dropdown-content 
 left: 0;
 top: 100%;
 min-width: 300px;


#lettersButton .dropdown .dropdown-content 
 right: 0;
 top: 100%;
 min-width: 300px;


#floraButton .dropdown .dropdown-content 
 top: 100%;
 left: -160px;
 min-width: 300px;

In the case of #floraButton, you'll have to set the left manual, I set it from my resolution.

This is a solution, but I recommend you to distribute the divs in a better way. With flexbox for example.