Dropdown menu conflicting with overflow: hidden;

I've been trying with a dropdown menu for a while now and managed to get it to work with overflow being hidden in the navbar, however doing so breaks the rest of the navbar. The navbar works fine when overflow is set to hidden in .navbar, however this hides the dropdown menu. I've tried to find a solution for this but haven't had much luck.

* {
    font-family: Open Sans, Trebuchet MS, Tahoma, Helvetica, sans-serif;
    background-color: white;
    margin: 0px;
    box-sizing: border-box;
}
.darkmode {
    background-color: #3d3d3d;
    color: white;
}
.navbar {
    text-align: center;
    background-color: #197053;
    margin: 0px;
    padding: 0px;
    position: relative;
    box-shadow: 0px 1px 5px #262626;
} 
.navbar a, .navbar p, .dropdown button {
    color: white;
    text-decoration: none;
    font-weight: bold;
    font-size: 150%;
    display: inline-block;
    padding: 14px 12px;
    background-color: #197053;
    margin: 0px;
    border: none;
    border-bottom: 5px solid transparent;
}
.navbar-title {
    position: relative;
    float: left;
    margin: 0px;
}
.navbar-current {
    float: none;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
}
ul.navbar-nav {
    float: right;
    margin: 0px;
    list-style-type: none;
    padding: 0px;
}
.navbar-nav li {
    float: left;
}
.navbar a:hover, .dropdown:hover button {
    border-bottom: 5px solid #3aa682;
}
.dropdown:hover .dropdown-content {
    display: block;
}
.dropdown:hover button {
    border-bottom: 5px solid #3aa682;
}
.dropdown {
    display: inline-block;
    position: relative;
}
.dropdown-content {
    display: none;
    position: absolute;
    width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}
.dropdown-content a {
    display: block;
    color: black;
    background-color: white;
    padding: 14px 12px;
    text-decoration: none;
    margin: 0px;
    font-size: 150%;
    font-weight: normal;
    border: none;
}
.dropdown-content a:hover   {
    background-color: #c9c9c9;
    border: none;
}
.title p {
    font-size: 250%;
    padding: 0px 50px;
    padding-top: 20px;
    margin: 0px;
}
.subtitle p {
    font-size: 200%;
    padding: 0px 50px;
    margin: 0px;
}
.body p {
    font-size: 120%;
    padding: 0px 50px;
    margin: 0px;
}
.body a:link, .body a:visited {
    color: #262626;
}
.footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    text-align: left;
    color: black;
}
.darkmode-button {
    color: black;
    font-size: 80%;
    padding: 10px 9px;
    margin: 0px;
    border: none;
    font-family: Open Sans, Trebuchet MS, Tahoma, Helvetica, sans-serif;
    background-color: white;
}
.darkmode .darkmode-button {
    color: white;
    background-color: #3d3d3d;
}
.darkmode-button:hover {
    color: #878787;
}

<!doctype html>
<html>
<head>
    <title>Home - Title</title>
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src = "main.js"></script>
<link rel="stylesheet" href="main.css">
</head>
<body>
    <div class="navbar">
        <div class="navbar-title">
            <p>Title</p>
        </div>
        <div class="navbar-current">
            <a href="home.html">Home</a>
        </div>
        <ul class="navbar-nav"> 
            <li class="dropdown">
                <button onclick="location.href='school.html';">School</button>
                <div class="dropdown-content">
                    <a href="school.html#Biology">Biology</a>
                    <a href="school.html#Chemistry">Chemistry</a>
                    <a href="school.html#Physics">Physics</a>
                </div>
            </li>
            <li><a href="photography.html">Photography</a></li>
            <li><a href="music.html">Music</a></li>
        </ul>
    </div>
    <div class="title">
        <p>Introduction</p>
    </div>
    <div class="body">
        <p>---</p>
    </div>
    <div class="footer">
        <button onclick="darkMode()" class="darkmode-button" id="darkmode-button">Dark Mode</button>
    </div>
</body>
</html>

Solution

.navbar {
width: 100%;
display: inline-block;
text-align: center;
background-color: #197053;
margin: 0px;
padding: 0px;
position: relative;
box-shadow: 0px 1px 5px #262626;
}

Make width 100% and display inline-block. This should do the job.