html - Drop down button within a navigation bar distorts the navigation bar

Question

I am trying to create a drop down button within a navigation bar. The button either is the entire width of the page or disrupts the that creates my navigation bar. Sorry about the length of the css code, I thought it was better to include all relevant parts in case there was something wrong other than the button.

My css code:

.website-title-layout {
    
    color:rgb(255, 165, 0);
    background-color:rgb(0, 191, 255);
    text-align: center;
    border-radius: 0px;
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    margin-bottom: 100px;
}


.website-title-layout a {
    
    color:rgb(255, 165,0)
    font-family: Merriweather, serif;
    padding: px 5px 5px 5px;
    display: inline-block;
}

.website-title a {
    text-decoration: none;
    font-size: 60px;
    color:rgb(255, 255, 255);
    font-weight: bold;
    posistion: fixed;
}

.website-title a:hover {
    background-color:rgb(255, 165, 0);
}

.page-title a {
    text-decoration: none;
    font-size: 40px;
    color:rgb(255, 255, 255);
}

.page-title a:hover {
    background-color:rgb(255, 165, 0);
}

.main-navigation-bar {
    text-align: center;
    font-family: "Merriweather", serf;
    border-radius: 0px;
    background-color:rgb(0, 191, 255);
    posistion: fixed;   
}

.main-navigation-bar a {
    text-decoration: none;
    color:rgb(255, 255, 255);
    font-size: 25px;
    padding: 10px 10px 10px 10px;
    display: inline-block;
    posistion: fixed;
}

.main-navigation-bar a:hover {
    background-color:rgb(255, 165, 0);
}
/* got the answer for the above from https://stackoverflow.com/questions/676324/div-background-color-to-change-onhover  from user3689455 comment for the a:hover*/

.drop-down-btn {
    background-color:rgb(0, 191, 255);
    color:rgb(255, 255, 255);
    padding: 10px 10px 10px 10px;
    font-size: 25px;
    border: none;
    font-family: "Merriweather", serif;
    
}

.drop-downn-btn a {
    text-decoration: none;
    background-color:rgb(0, 191, 255);
    color:rgb(255, 255, 255);
    padding: 10px 10px 10px 10px;
    font-size: 25px;
}   

.dropdown {
    posistion: relative;
    display: inline-block;
}

.drop-down-content {
    display: none;
    posistion:absolute;
    background-color:rgb(0, 191, 255);
    min-width: 50px;
}

.drop-down-content a {
    font-size: 15px;
    color:rgb(255, 255, 255);
    padding: 10px 10px 10px 10px;
    text-decoration: none;
}

.drop-down-content a:hover {
    background-color:rgb(255, 165, 0);
}

.drop-down:hover .drop-down-content {
    display: block;
}

.drop-down:hover .drop-down-btn {
    background-color:rgb(255, 165, 0)
}

My HTML code:

<div class="website-title-layout">
    <div class="website-title">
        <a href="homepage.html"> First Meditation </a>
    </div>
    <div class="page-title">
        <a href="contact.html"> Contact </a>
    </div>
    <div class="main-navigation-bar">
        <a href="homepage.html"> Homepage </a>
        <div class="drop-down">
            <a href="the-benefitsandhinderances.html"><button class="drop-down-btn"> The Benefits and Hinderances </a></button>
            <div class="drop-down-content">
                <a href="the-benefits.html"> The benefits </a>
                <a href="the-hinderances.html"> The Hinderances </a>
            </div>
        </div>
        <a href="additionalresources.html"> Additional Resources </a>
        <a href="questionaire.html"> Questionaire </a>
        <a href="contact.html"> Contact </a>
    </div>
</div>

Answer 1

Some of this was my own fault, missed a "-" in the the dropdown in my css file. Also, I had to set my subordinate div tag to absolute and the one above to relative.

For anyone with a similar problem this is how I fixed it. Sorry for anyone who tried solve it.

.drop-down-btn {
    background-color:rgb(0, 191, 255);
    color:rgb(255, 255, 255);
    padding: 10px 10px 10px 10px;
    font-size: 25px;
    border: none;
    font-family: "Merriweather", serif;
    position: relative;
}

.drop-downn-btn a {
    text-decoration: none;
    background-color:rgb(0, 191, 255);
    color:rgb(255, 255, 255);
    padding: 10px 10px 10px 10px;
    font-size: 25px;
}   

.drop-down {
    position: relative;
    display: inline-block;
}

.drop-down-content {
    display: none;
    position: absolute;
    background-color:rgb(0, 191, 255);
    min-width: 50px;
    left: 0;
    width: 50%;
}

.drop-down-content a {
    font-size: 15px;
    color:rgb(255, 255, 255);
    padding: 10px 10px 10px 10px;
    text-decoration: none;
}

.drop-down-content a:hover {
    background-color:rgb(255, 165, 0);
}

.drop-down:hover .drop-down-content {
    display: block;
}

.drop-down:hover .drop-down-btn {
    background-color:rgb(255, 165, 0)
}