Hostinger Nav Bar not being displayed correctly

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Arial', sans-serif;
    color: #333;
    line-height: 1.6;
    background-color: #f4f4f9;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

/* Header styles */
.main-header {
    background: #0d47a1;
    color: white;
    padding: 1rem 0;
    position: relative;
    z-index: 1000;
}

.main-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

.main-header .logo {
    font-size: 1.8rem;
    font-weight: bold;
}

.menu-toggle {
    display: none;
}

.menu-label {
    display: none;
    font-size: 2rem;
    color: white;
    cursor: pointer;
}

.nav-menu {
    display: flex;
    flex-direction: row;
}

.main-header .nav-links {
    display: flex;
    gap: 1.5rem;
    position: relative;
}

.main-header .nav-links li {
    position: relative;
}

.main-header .nav-links a {
    color: white;
    font-size: 1rem;
    transition: color 0.3s ease;
    padding: 0.5rem 1rem;
    display: inline-block;
}

.main-header .nav-links a:hover {
    color: #683bff;
}

/* Dropdown Menu */
.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #0d47a1;
    border-radius: 8px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    min-width: 150px;
    padding: 0.5rem 0;
}

.dropdown-menu li {
    margin: 0;
}

.dropdown-menu a {
    color: white;
    padding: 0.5rem 1rem;
    display: block;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.dropdown-menu a:hover {
    background: #003c8f;
}

/* Show dropdown on hover */
.nav-links li.dropdown:hover .dropdown-menu {
    display: block;
}

/* Responsive Design */
@media (max-width: 768px) {
    .menu-label {
        display: block;
    }

    .nav-menu {
        display: none;
        flex-direction: column;
        gap: 1rem;
        position: absolute;
        top: 100%;
        left: 0;
        background: #0d47a1;
        width: 100%;
        padding: 1rem 0;
        z-index: 1000;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }

    .menu-toggle:checked + .menu-label + .nav-menu {
        display: flex;
    }

    .nav-links {
        flex-direction: column;
        align-items: flex-start;
    }

    .nav-links a {
        padding: 0.5rem 1rem;
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style/navbar.css">
</head>
<body>
    <header class="main-header">
        <div class="container">
            <h1 class="logo">Title</h1>

            <!-- Checkbox toggle for responsive menu -->
            <input type="checkbox" id="menu-toggle" class="menu-toggle" aria-label="Toggle navigation">
            <label for="menu-toggle" class="menu-label">☰</label>

            <nav class="nav-menu">
                <ul class="nav-links">
                    <li><a href="index.php">Home</a></li>
                    <li class="dropdown">
                        <a href="#">Services</a>
                        <ul class="dropdown-menu">
                            <li><a href="bootcamp.php">Bootcamps</a></li>
                            <li><a href="courses.php">Courses</a></li>
                            <li><a href="membership.php">Subscribe</a></li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#">Resources</a>
                        <ul class="dropdown-menu">
                            <li><a href="machines.php">Machines</a></li>
                            <li><a href="ctf.php">CTFs</a></li>
                            <li><a href="challenges.php">Challenges</a></li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#">Community</a>
                        <ul class="dropdown-menu">
                            <li><a href="forum.php">Forum</a></li>
                            <li><a href="events.php">Blogs</a></li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#">Our Team</a>
                        <ul class="dropdown-menu">
                            <li><a href="about.php">About</a></li>
                            <li><a href="contact.php">Contact</a></li>
                        </ul>
                    </li>
                    <?php
                    if (isset($_SESSION['user_id'])) {
                        echo '<li><a href="library.php">Library</a></li>';
                        echo '<li><a href="logout.php">Logout</a></li>';
                    } else {
                        echo '<li><a href="login.php">Login</a></li>';
                    }
                    ?>
                </ul>
            </nav>
        </div>
    </header>
</body>
</html>

I'm tryin to add this nav bar to hostinger but it appears like:

I'm encountering difficulties integrating my custom-designed navbar into my website hosted on Hostinger.

The navbar, when implemented, displays incorrectly, deviating significantly from the intended design. I've attempted various troubleshooting steps, including removing JavaScript elements and simplifying the code, but the issue persists.

Keeping in mind that it is working fine locally.

Solution

I added the css code into the html file itself in a style tag and everything worked fine.