<header>
    <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark navbar-change" id="main_navbar">
        <a class="navbar-brand" href="index.html">
            <img class="logoHeadstart-responsive" src="images/Logo_web_h59px.png" alt="Headstart Malaysia">
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse rounded" id="navbarCollapse">
            <ul class="navbar-nav ml-auto" id="menu">
                <li class="nav-item active">
                    <a class="nav-link" href="index.html">Home<span class="sr-only">(current)</span></a>
                </li>
               <li class="nav-item navbar-fixed-top">
                    <button style="color: #0756a5" class="nav-link dropbtn" onclick="location.href='aboutUs.html'">About</button>
                    <ul style="list-style-type: none; margin: 0; padding: 0;" class="dropdown-content rounded">
                        <li><a href="aboutUs.html#aboutUs-anchor">Overview</a>
                        <li><a href="#">Facilities</a>
                            <ul style="list-style-type: none; margin: 0; padding: 0; margin-left: 30px" class="dropdown-content rounded">
                                <li><a href="aboutUs.html#facilities-anchor">Academy@SACC</a></li>
                                <li><a href="#">Therapy@Damansara</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Team</a>

                        </li>
                    </ul>
                </li>


                <li class="nav-item navbar-fixed-top">
                    <button style="color: #0756a5" class="nav-link dropbtn" onclick="location.href='#'">Intervention</button>
                    <ul style="list-style-type: none; margin: 0; padding: 0;" class="dropdown-content rounded">
                        <li><a href="eip.html#overview-anchor" class="eip-text"><span>Early Intervention</span></a>
                            <ul style="list-style-type: none; margin: 0; padding: 0; margin-left: 30px" class="dropdown-content rounded">
                                <li><a href="eip.html#overview-anchor">Overview</a></li>
                                <li><a href="eip.html#admission-anchor">Admission</a></li>
                                <li><a href="eip.html#calendar-anchor">Timetable</a></li>
                                <li><a href="eip.html#academic-calendar-anchor">Calendar</a></li>
                            </ul>
                        </li>
                        <!--<li><a href="#">Junior <span style="background-color: #F18805" class="badge badge-secondary animated pulse">COMING SOON</span></a>-->
                        <ul style="list-style-type: none; margin: 0; padding: 0; margin-left: 30px" class="dropdown-content rounded">
                            <li><a href="#">Overview</a></li>
                            <li><a href="#">Admission</a></li>
                            <li><a href="#">Timetable</a></li>
                            <li><a href="#">Calendar</a></li>
                        </ul>
                        </li>
                        <li><a href="eip.html#devmilestones-anchor">Developmental Milestones</a>

                    </ul>
                </li>

                <li class="nav-item navbar-fixed-top">
                    <button style="color: #0756a5" class="nav-link dropbtn" onclick="location.href='therapy.html'">Therapy</button>
                    <ul style="list-style-type: none; margin: 0; padding: 0;" class="dropdown-content rounded">
                        <li><a href="therapy.html">Academy@SACC Mall</a>
                            <ul style="list-style-type: none; margin: 0; padding: 0; margin-left: 30px" class="dropdown-content rounded">
                                <li><a href="therapy.html">Behaviour</a></li>
                                <li><a href="therapy.html">Speech</a></li>
                                <li><a href="therapy.html">Occupational</a></li>

                            </ul>
                        </li>
                        <li><a href="therapy.html">Therapy@Damansara</a>
                            <ul style="list-style-type: none; margin: 0; padding: 0; margin-left: 30px" class="dropdown-content rounded">
                                <li><a href="therapy.html">Speech</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>


                <li class="nav-item navbar-fixed-top"><div class="dropdown">
                    <button style="color: #0756a5" class="nav-link dropbtn" onclick="location.href='eca.html'">ECA</button>
                    <div class="dropdown-content rounded">
                        <a href="eca.html#eca-anchor">Overview</a>
                        <a href="eca.html#classes-anchor">Classes</a>
                        <a href="eca.html#eca-timetable-anchor">Timetable</a>

                    </div>
                </div>
                </li>             
                </div>
                </li>


            </ul>

        </div>
    </nav>
</header>

I am currently working on the design of my company's website and have encountered an issue with the placement of the header. When I paste the code for the header, it appears on the left side of the page instead of at the top as intended.

Previously, I had successfully implemented a similar header in another version of the webpage which included pagination coding. However, when attempting to apply it to this version which includes collapsing posts functionality, the header does not display correctly.

The navigation bar should be horizontal and include dropdown functionality. Unfortunately, it is appearing stuck to the left-hand side of the page rather than at the top where it belongs.

As someone new to web development, I am struggling to troubleshoot this issue and ensure that the header displays correctly. Any guidance or assistance would be greatly appreciated.

Here is how the navigation bar should appear And here is the incorrect appearance