Centering dropdown menu in CSS - html

Question

I am having trouble centering the following CSS dropdown menu:
.container {
overflow: hidden;
background-color: none;
font-family: 'Questrial', sans-serif;
}
.container a {
float: right;
font-size: 20px;
color: green;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: right;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 20px;
border: none;
outline: none;
color: green;
padding: 14px 16px;
background-color: inherit;
font-family: 'Questrial', sans-serif;
}
.container a:hover,
.dropdown:hover .dropbtn {
background-color: none;
color: green;
}
.dropdown-content {
display: none;
position: absolute;
background-color: none;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: green;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: none;
color: green;
}
.dropdown:hover .dropdown-content {
display: block;
}
I have tried using position: absolute, and entering values for "top" and left" however this only seems to move the text, and loses the dropdown functionality.
Any help would be appreciated.
Thanks.
Full code here:
gist.github.com/ruslan024/1a7d2ce4936a35369221a8f0e41c5dd7

Answer 1

Do you mean something like this? Without the full HTML formatted into a snippet (not just some 3rd party gist) I had to make some assumptions. Apart from that it was just a few CSS tweaks.
.container {
background-color: #eee;
font-family: 'Questrial', sans-serif;
text-align: center;
height: 300px;
}
.container > a {
display: inline-block;
font-size: 20px;
color: green;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropbtn {
display: inline-block;
font-size: 20px;
padding: 14px 16px;
background-color: inherit;
font-family: 'Questrial', sans-serif;
color: green;
}
.dropdown-content {
display: none;
position: absolute;
background-color: none;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: green;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: none;
color: green;
}
.dropbtn:hover .dropdown-content {
display: block;
}
<div class="container">
Contact Us
<div href="" class="dropbtn">Resources
<span class="dropdown-content">
Market Data Bank
Stock Quotes
Finacial Tools
</span>
</div>
<div href="" class="dropbtn">Services
<span class="dropdown-content">
Planning and Guidance
Portfolio Advisory Services
Wealth Planning
</span>
</div>
About Us
Home
</div>