Cant align dropdown menu for a school project

I am a student doing interactive media as a course and cannot get my dropdown menu's to properly line up. The first one works, but the rest dont. Each dropdown should line up with the button above, but for whatever reason they just go to the first button.

Blue arrow shows location of the mouse Correct Incorrect

HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Course Work</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="navLogo">
        <a href="Home.html"><img src="Portfolio Assets/Global/Logo.svg" width="9%" /></a>
    </div>
    <div class="dropdown">
        <input type="submit" value="iMedia" class="navButton">
        <div class="dropdown-content">
            <a href="iMedia Course.html" ><input type="submit" value="Course Work" class="dropButton"></a>
            <input type="submit" value="Exam" class="dropButton">
            <input type="submit" value="Software" class="dropButton">
        </div>
    </div>
    <div class="dropdown">
        <input type="submit" value="GCSE's" class="navButton">
        <div class="dropdown-content">
            <input type="submit" value="Breakdown" class="dropButton">
            <input type="submit" value="More Details" class="dropButton">
            <input type="submit" value="Additional Software" class="dropButton">
        </div>
    </div>
    <div class="dropdown">
        <input type="submit" value="Past Work" class="navButton">
        <div class="dropdown-content">
            <input type="submit" value="temporary content" class="dropButton">
            <input type="submit" value="temporary content" class="dropButton">
            <input type="submit" value="temporary content" class="dropButton">
        </div>
    </div>
    <div class="mainBody">
        <div>
            <input type="submit" value="iMedia Course Work" class="page">
        </div>
        <div>
            
        </div>
    </div>
</body>
</html>

CSS

@charset "utf-8";
/* CSS Document */

body {
    background: #202020;
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
}

.navBar {
    vertical-align: middle;
}

.navLogo {
    width: 100%;
    display: block;
    background: #000000;
    border: solid #222222;
    border: none;
    vertical-align: middle;
    text-align: center;
}

.dropdown {
    height: 100%;
    position: relative;
    display: inline;
    vertical-align: middle;
    text-align: center;}

.dropdown-content {
    width: 100%;
    position: absolute;
    box-shadow: 0px 0px;
    padding: 0px 0px;
    z-index: 1;
    opacity: 0;
    align-content: center;
    transition: 200ms ease-in-out;
    text-align: center;
}

.dropButton {
    width: 50%;
    background-color: #000000;
    border: solid #222222;
    color: aliceblue;
    font-size: 200%;
    padding: 0px 4px;
    text-decoration: none;
    vertical-align: middle;
    text-align: center;
    cursor: pointer;
    z-index: 1;
}

.dropdown:hover .dropdown-content {
    display: block;
    opacity: 1;
}

.navButton {
    width: 33%;
    background-color: #000000;
    border: solid #222222;
    color: aliceblue;
    font-size: 56px;
    padding: 0px 4px;
    text-decoration: none;
    vertical-align: middle;
    text-align: center;
    margin: auto;
    cursor: pointer;
}

.mainBody {
    vertical-align: middle;
}

.page {
    width: 100%;
    background-color: #000000;
    border: solid #222222;
    color: aliceblue;
    font-size: 56px;
    padding: 0px 4px;
    text-decoration: none;
    vertical-align: middle;
    cursor: default;
    z-index: 1;
}

I have tried creating seperate variables for each dropdown menu and content I have tried changing the display and all alignments multiple times and it wont work

Solution

Try this,

add left: 0

.dropdown-content {
    width: 100%;
    position: absolute;
    box-shadow: 0px 0px;
    padding: 0px 0px;
    z-index: 1;
    opacity: 0;
    align-content: center;
    transition: 200ms ease-in-out;
    text-align: center;
    left: 0;
}