Text merged to the right - html

Question

I'm trying to build a small support website for a community. Now I have tried to recreate my dropdown, several times but I can't see where it goes wrong.
When I code it everything works normal, problem is when I put it together with navbar, something is pushing the text to the right, and generate a small box on the left so the menu wouldn't be right below.
.subbtn {
font-family: Arial;
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
cursor: pointer;
padding: 14px;
}
.submenu {
position: relative;
display: inline-block;
}
.submenu-content {
display: none;
position: absolute;
min-width: 86px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.5);
z-index: 1;
}
.submenu-content a {
color: #0d0d0d;
padding: 14px;
text-decoration: none;
display: block;
}
.submenu:hover .submenu-content {
display: block;
}
.submenu:hover .subbtn {
color: white;
background: #403c36;
opacity: 0.8;
}
.navbar_1 {
font-family: Arial;
font-size: 14px;
list-style-type: none;
margin: 0;
padding: 0;
}
.navbar_item {
display: block;
text-transform: uppercase;
font-weight: bold;
}
.navbar_1 a {
display: inline-block;
text-align: center;
text-decoration: none;
padding: 14px;
color: #0d0d0d;
}
.navbar_1 a:hover {
color: white;
background: #403c36;
opacity: 0.8;
}
<ul class="navbar_1">
<li class="navbar_item">
nyheder
<div class="submenu">
<div class="subbtn">information</div>
<ul class="submenu-content">
regler
vedtægter
Hvem er vi
bestyrelsen
</ul>
</div>
bliv medlem
medlemsfordele
kontakt
</li>
</ul>

Answer 1

If I'm understanding correctly, the solution is very simple.
As isherwood mentioned, a list comes with a default padding on the left.
My advice is, to give your <ul> element a fixed padding by adding this to your CSS:
ul {
padding: 4px; // or 0; if you prefer controlling the padding through the list items
}
That should do the trick!
If that's not wat you meant, please be more specific in your topic (by using screenshots for example)
.subbtn {
font-family: Arial;
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
cursor: pointer;
padding: 14px;
}
.submenu {
position: relative;
display: inline-block;
}
.submenu-content {
display: none;
position: absolute;
min-width: 86px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.5);
z-index: 1;
padding: 4px; /* <----------------------------------------- HERE */
}
.submenu-content a {
color: #0d0d0d;
padding: 14px;
text-decoration: none;
display: block;
}
.submenu:hover .submenu-content {
display: block;
}
.submenu:hover .subbtn {
color: white;
background: #403c36;
opacity: 0.8;
}
.navbar_1 {
font-family: Arial;
font-size: 14px;
list-style-type: none;
margin: 0;
padding: 0;
}
.navbar_item {
display: block;
text-transform: uppercase;
font-weight: bold;
}
.navbar_1 a {
display: inline-block;
text-align: center;
text-decoration: none;
padding: 14px;
color: #0d0d0d;
}
.navbar_1 a:hover {
color: white;
background: #403c36;
opacity: 0.8;
}
<ul class="navbar_1">
<li class="navbar_item">
nyheder
<div class="submenu">
<div class="subbtn">information</div>
<ul class="submenu-content">
regler
vedtægter
Hvem er vi
bestyrelsen
</ul>
</div>
bliv medlem
medlemsfordele
kontakt
</li>
</ul>