Adjust position in the dropdown selection menu - html

Question

I am facing the CSS problem in the dropdown menu selection box. My position in the dropdown box view position is not good. My client is not satisfied look like this view dropdown box. Hope someone can guide me how to solve it. Thanks.
Below is my coding:
<style>
.dropdown-content {
display: none;
position: absolute;
min-width: 70px;
z-index: 9;
}
.dropdown-content a {
display: block;
background: #f1f1f1;
text-decoration: none;
color: black;
}
.dropdown {
display: inline-block; /* Change display from block to inline-block */
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover #dropbtn {
background-color: #3e8e41;
}
</style>
<div class="topnav">
<span id="curTime" class='hide'> </span>
<div class="dropdown">
<a id="dropbtn" style="margin-right:20px;" href="#" onclick="setting()" data-toggle="tooltip" data-original-title="Setting" data-placement="bottom" class="btn btn-metis-1 btn-sm">
<i class="fa fa-wrench"></i>
</a>
<div class="dropdown-content">
Tetapan Umum
Pengurusan Pengguna
</div>
</div>
<!-- Edit 1: Move logout button out of dropdown menu -->
<a href="#" onclick="logout()" data-toggle="tooltip" data-original-title="Logout" data-placement="bottom" class="btn btn-metis-1 btn-sm">
<i class="fa fa-power-off"></i>
</a>
</div>
My output show me like the below picture:
I expected the result is like below the picture:

Answer 1

i've added some padding to the anchor's inside the dropdown-content div and on the div itself i've added width: fit-content to make sure it will not cutoff the text inside.
<style>
.dropdown-content {
display: block;
position: absolute;
min-width: 70px;
z-index: 9;
width: fit-content;
}
.dropdown-content a {
display: block;
background: #f1f1f1;
text-decoration: none;
color: black;
padding-left: 5px;
padding-right: 5px;
}
.dropdown {
display: inline-block; /* Change display from block to inline-block */
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover #dropbtn {
background-color: #3e8e41;
}
</style>
<div class="topnav">
<span id="curTime" class='hide'> </span>
<div class="dropdown">
<a id="dropbtn" style="margin-right:20px;" href="#" onclick="setting()" data-toggle="tooltip" data-original-title="Setting" data-placement="bottom" class="btn btn-metis-1 btn-sm">
<i class="fa fa-wrench"></i>
</a>
<div class="dropdown-content">
Tetapan Umum
Pengurusan Pengguna
</div>
</div>
<!-- Edit 1: Move logout button out of dropdown menu -->
<a href="#" onclick="logout()" data-toggle="tooltip" data-original-title="Logout" data-placement="bottom" class="btn btn-metis-1 btn-sm">
<i class="fa fa-power-off"></i>
</a>
</div>