Dropdown menu is not aligned properly - html

Question

I am having some trouble with my dropdown menu bar and the dropdown is not aligned properly as well.

Answer 1

Modified code on JSFiddle
HTML
<div class="container">
Home
<div class="dropdown">
<button class="dropbtn">Recipes</button>
<div class="dropdown-content">
Choc Chip Cookie
Choc Brownie
Choc Pretzels
</div>
</div>
Gallery
Contact
</div>
CSS
.container {
overflow: hidden;
background-color: #3399CC;
border-style: solid;
border-color: black;
border-width: medium;
width: 50%;
margin: auto;
text-align: center;
font-family: 'Lobster',cursive;
}
.container a {
float: left;
font-size: 22px;
color: black;
text-align: center;
padding: 10px 14px;
text-decoration: none;
align-content: center;
width: 21%; /* Modified by me to change the width of Home, Gallery and Contact element */
display: block;
}
.dropdown {
float: left;
overflow: hidden;
width: 24%; /* Modified by me to change the width of Recipe element */
}
.dropdown .dropbtn {
font-size: 22px;
border: none;
outline: none;
color: black;
padding: 10px 14px;
background-color: inherit;
font-family: 'Lobster',cursive;
}
.container a:hover, .dropdown:hover { /* Modified by me. Change the background color of dropdown element instead of the button */
background-color: #52C3EC;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #3399CC;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
width: 250px;
}
.dropdown-content a {
float: none;
color: black;
text-align: left;
padding: 10px 14px;
padding-left: 40px; /* Modified by me to align the list item in the dropdown menu */
text-decoration: none;
display: block;
width: 78%; /* Modified by me to change the width of the list item in the dropdown menu */
}
.dropdown-content a:hover {
background-color: #52C3EC;
}
.dropdown:hover .dropdown-content {
display: block;
}
I'm not changing your page's structure, only the CSS code used in them. I've marked which part of the code that I modified along with the explataion.
You can still see a little bit of space and the end of Contact element. That's because scaling the size in percentage is hard. You can fix that by changing the unit to pixel. I'll leave the decision to you.
Also the result is best viewed in your browser not in JSFiddle due to size constraint.