Navbar is not inline - html

Question

I have got a navbar problem again, because I had to change the code ect due to the navbar code overriding other contents on the page, but anyway The Nvigation text is not inline and I am finding it difficult to get it inline even after over an hor of research i am unable to find the answer..
My HTML Code:
<div class="navbar">
Home
News
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div>
My CSS Code:
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial, Helvetica, sans-serif;
text-align: center
}
.navbar a {
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
display: inline-block;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
display: inline-block;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
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: center;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}

Answer 1

You need to make .navbar a either inline-block or block. Your padding will not be applied as the a is inline by default.
.navbar a {
display: inline-block;
font-size: 16px;
...
}

Answer 2

I recommend you make the following changes.
Add the flexbox property to your .navbar class
Add align-items property center to your .navbar class - will align all the item menus
Get rid of display: inline-block on all your
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
display: flex;
align-items: center;
}
.navbar a {
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
// .dropdown {
// display: inline-block;
// overflow: hidden;
// }
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
//display: inline-block;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
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: center;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}

Answer 3

Welcome to StackOverflow Kyle!
The problem resides in not having a vertical-align style declaration on your .dropdown .dropbtn CSS class declarations. Add it in as shown below:
.dropdown, .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
display: inline-block;
vertical-align: middle; // Add this!
}
You'll also need to add a comma between the classes to make sure the styles are applied to both class declarations!
Here is a link to a codepen where you can view the result:
https://codepen.io/mikeabeln_nwea/pen/pxaMKV

Answer 4

I checked out your CSS in pastebin. I added
.navbar {
display:flex;
justify-content:center;
}
and you could also delete the text-align:center property