Navbar displaying in the middle of the screen

Question

I'm currently trying to build a website using vue.js(vue3) and element-plus. I created a Navbar component in a Navbar.vue file and i tried adding it to the App.js file the Navbar keeps displaying in the middle of the page, making everything disorganized.

NB: I'm using a 21" lenovo thinkVision when I split the screen the navbar appears perfectly as it should but when in full screen it moves to the center of the page. I've tried almost everything but still it keeps happening. I even changed pc but still it keeps on appearing on the middle page.[text]

App.js

<template>
  <NavbarComponent/>
  <HeroView/>
  <UserSuccessStories/>
  
  <RouterView />
</template>

<script setup>
import {  RouterView } from 'vue-router'
import NavbarComponent from '@/components/Navbar.vue'
import HeroView from '@/views/Heroview.vue'
import UserSuccessStories from '@/components/UserSuccessStories.vue'

</script>

<style >
.el-card__body {
  padding: none !important;
}

</style>

Navbar.vue

<template>
    <div class="navbar">
        <section>
            <img src="/images/logo1.png" alt="logo" style="width: 200px">

        </section>

        <el-menu default-active="1" 
        class="el-menu-demo" 
        mode="horizontal" 
        @select="handleSelect" 
        :ellipsis="false">
            <el-menu-item index="1">Home</el-menu-item>

            <el-sub-menu index="2">
                <template #title>Courses</template>
                <el-menu-item index="2-1">item one</el-menu-item>
                <el-menu-item index="2-2">item two</el-menu-item>
                <el-menu-item index="2-3">item three</el-menu-item>
            </el-sub-menu>
            
            <el-sub-menu index="3">
                <template #title>Questions</template>
                <el-menu-item index="3-1">item one</el-menu-item>
                <el-menu-item index="3-2">item two</el-menu-item>
                <el-menu-item index="3-3">item three</el-menu-item>
            </el-sub-menu>

            <el-sub-menu index="4">
                <template #title>Questions</template>
                <el-menu-item index="4-1">item one</el-menu-item>
                <el-menu-item index="4-2">item two</el-menu-item>
                <el-menu-item index="4-3">item three</el-menu-item>
            </el-sub-menu>

            <el-menu-item index="5">Pricing</el-menu-item>
        </el-menu>

        <section class="login">

            <el-button type="success" style="background-color: transparent;
            border-color:black; color: black;">Login</el-button>
            <el-button type="success" style="background-color: rgba(168, 192, 39, 1);border: 2px;  border-color: rgba(168, 192, 39, 1)">Register</el-button>

        </section>

        <section>

        </section>
    </div>
</template>

<script>
export default {
    name: "NavbarComponent"

}
</script>

<script setup>
import { ref } from 'vue'

function handleSelect(val, event) {
    console.log(val)
}
</script>


<style >
body{
    background-color: rgba(236, 242, 198, 0.6);
  }
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
 
}

.el-menu--horizontal {
    align-items: center;
}

.el-menu--horizontal.el-menu {
    border-bottom: none !important;
    background-color: transparent;
}

.el-menu--horizontal>.el-menu-item.is-active {
    border-bottom: 2px solid rgba(168, 192, 39, 1);
    color: rgba(41, 39, 37, 0.9) !important;
}

img{
    margin-top: 10px;
}

.login{
    display: flex;
    justify-content: space-between;
    align-items: center;
    
}
</style>

Heroview.vue

<template>
    <div class="main">
        <section>
            <h1>Focus <br>Technologies</h1>

            <h2>Lorem ipsum dolor sit amet, consectetur adipiscing</h2>

            <p>
                Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore
                magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam,
                nisi ut aliquid ex ea commodi consequatur. Quis aute iure reprehenderit in voluptate velit esse cillum
                dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui
                officia deserunt mollit anim id est laborum
            </P>
        </section>

        <section>
            <img class="pic" src="/images/pic.png" alt="pic">
        </section>

    </div>

    <section class="explore">

        <el-button class="btn1" type="success" style="background-color: transparent;
        border-color:black; color: black;">Explore Courses</el-button>
        <el-button class="btn2" type="success"
            style="background-color: rgba(101, 115, 23, 1);border: 2px;  border-color: rgba(101, 115, 23, 1)">Explore
            Internship</el-button>

    </section>

    <div class="line"></div>


    <div class="card-container1">
        <el-card class="card1">
            <img class="logo" src="/images/zapper.png" />
        </el-card >

        <el-card class="card1">
            <img class="logo" src="/images/spotify.png" />
        </el-card>

        <el-card class="card1">
            <img class="logo" src="/images/zoom.png" />
        </el-card>

        <el-card class="card1">
            <img class="logo" src="/images/amazon.png" />
        </el-card>

        <el-card class="card1">
            <img class="logo" src="/images/adobe.png" />
        </el-card>

        <el-card class="card1">
            <img class="logo" src="/images/notion.png" />
        </el-card>

        <el-card class="card1">
            <img class="logo" src="/images/netflix.png" />
        </el-card>

        
    </div>

</template>



<script>
export default {

    name: 'HeroView'
}
</script>

<script setup>

</script>


<style scoped>
.main {
    display: flex;

}

h1 {
    width: 659px;
    height: 220px;
    margin-top: 290px;
    margin-left: 161px;
    font-weight: 700;
    font-size: 100px;
    line-height: 110px;
    color: rgba(0, 0, 0, 1);
}

h2 {
    width: 878px;
    height: 42px;
    margin-left: 161px;
    font-weight: 600;
    font-size: 35px;
    line-height: 42.36px;
}

p {
    width: 807px;
    height: 210px;
    font-weight: 500;
    font-size: 25px;
    line-height: 30.26px;
    margin-top: 69px;
    margin-left: 161px;
    margin-right: 71px;

}

.pic {
    width: 657px;
    height: 633px;
    margin-top: 290px;
    margin-right: 92px;
    margin-left: 132px;
}


.explore {
    display: flex;
    margin-left: 161px;
    margin-top: 71px;
}


.line {
    border-bottom: 2px solid;
    border-color: rgba(168, 192, 39, 1);
    width: 1600px;
    margin-top: 136px;
    margin-right: 159px;
    margin-left: 161px;
}

.card-container1 {                  
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1073px;
    height: 94px;
    margin-left: 422px;
    margin-top: 23px;
    margin-bottom: 47px;
    padding: none;
   
}
.el-card.is-always-shadow {
    box-shadow: none !important;
    border:none !important; 
   

}


.el-card__body {
    padding: none !important;
    display: flex;
    align-items: center;
    
}
.card1 {
    max-width: 153.29px;
    height: 94px;
    margin-top: 23px;
    background-color: transparent;
    gap: 30px;
    

}

</style>

UserSuccessStories.vue

<template >
    <div class="uss">
       <h2 class="user-story"> User Success Stories</h2> 

       <div class="user-success">
        <el-card class="usercard" style="width: 480px" shadow="always">
            <img src="/images/uss1.png">
            <img src="/images/usspic1.png">
            <img src="/images/Rose Mark.png"><br>
            <img src="/images/Star.png">
        </el-card>
        
        <el-card style="width: 480px" shadow="hover">Hover</el-card>
        <el-card style="width: 480px" shadow="never">Never</el-card>
      </div>

    </div>
</template>
<script>
export default {
    name: "UserSuccessStories"
}
</script>
<style scoped>
.uss {
    background-color: rgb(255, 255, 255);
    height: 643px;
    width: 1920%;
}
user-success{
    padding: none !important;
}
   .user-story{
    width: 413px;
    height: 48px;
    font-size: 40px;
    font-weight: 600;
    line-height: 48.41px;
    margin-top: 51px;
    margin-left: 754px;
  
   } 

   .userard {
    padding: none !important;
   }
</style>

This is the view when i have slit the screen This is how it appears when i put it in full screen

i want the fullscreen mode to also appear exactly how the split screen mode appears.