Responsiveness seems different in VS Code and actual phone

Question

*{
    padding:0;
    margin:0;
}

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

ul{
    list-style:none;
}

html{
    color-scheme:light dark;
}



@media (prefers-color-scheme:dark){
    #sidebar a{
        color:white;
    }

    #logo_light{
        display:none;
    }
    
    #logo_dark{
        display:flex;
        justify-content: center;
        align-items: center;
    }

    #pic_of_logo_dark{
        height:30px; 
        width:150px;
    }

    .button{
        border:1px solid white;
    }

    #sidebar a:hover{
        color:gold;
    }

    #upper_bar{
        background-color:#cfa3ea;
    }
    
}

@media (prefers-color-scheme:light){
    #logo_light{
        display:flex;
        justify-content: center;
        align-items: center;
    }
    
    #logo_dark{
        display:none;
    }

    #pic_of_logo_light{
        height:30px; 
        width:150px;
    }

    .button{
        border:1px solid black;
    }

    .menu_option:hover{
        color:greenyellow;
    }

    #upper_bar{
        background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
    }
    
}

/* Uppermost bar */

#upper_bar{
    min-height:10vh;
    max-width:100vw;
    color:black;
    display:flex;
    justify-content: center;
    align-items: center;
    font-size:4vmin;
}

/* Header */

header{
    max-width:100dvw;
    min-height:12dvh;
    display:flex;
    justify-content: center;
    align-items: center;
}

nav{
    width:85%;
    height:100%;
    display:flex;
    justify-content:space-between;
}

#menubar{
    display:flex;
    justify-content:center;
    align-items:center;
}

#sidebar{
    display:flex;
    justify-content: center;
    align-items: center;
    column-gap:4rem;
    font-size:1rem;
}

#hamburger{
    opacity:0;
}


.button{
    height:35px;
    width:80px;
    display:flex;
    justify-content: center;
    align-items: center;
    border-radius:5px;
}

#sign_up{
    background-color: rgb(35, 145, 204);
    color:white;
}

.button:active{
    transform:scale(1.04);
}

#click{
    display:none;
}

/* Section */
section{
    max-width:100vw;
    display:flex;
    justify-content: center;
    align-items: center;
}

.common_width{
    max-width:85%;
}

#section1_part{
  display:flex;
  column-gap:20%;
}

#section1_left{
  padding-top:8vw;
}

#section1_left_theme{
    font-size:2vw;
    font-family:Georgia, 'Times New Roman', Times, serif;
}

#section1_left_para{
   font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
   font-size:1vmin;
}

.button_section1_left{
    border:1px solid black;
    height:40px;
    width:120px;
    display:flex;
    justify-content: center;
    align-items: center;
    border-radius:2px;
}

.button_section1_left:active{
  transform:scale(1.02);
}

#section1_right_image{
    height:500px; 
    width:511px;
}

/* Media query for uppermost bar */
@media screen and (max-width:1024px){
    #hamburger{
        opacity:1;
    }

    #sidebar{
        flex-direction:column;
        position:absolute;
        top:17%;
        left:-100%;
        width:100%;
        color:white;
        /* background-color:rgba(166, 166, 210,0.4); */
        padding-top:15px;
        padding-bottom:15px;
        row-gap:2rem;
        transition:all 1s cubic-bezier(0.075, 0.82, 0.165, 1) 0s;
        font-weight:560;
    }

    .button{
        width:96vw;
    }
    
    .menu_option:hover{
        color:rgb(168, 84, 98);
    }

    #click:checked ~ #sidebar{
        left:0;
    }
    
    #section1_part{
        column-gap:3%;
    }

    #section1_left_theme{
      font-size:2.8vw;
    }

}

@media (prefers-color-scheme:dark) and (max-width:1024px){
    #sidebar{
        background-color:rgba(169, 162, 162,0.8);
    }
}

@media (prefers-color-scheme:light) and (max-width:1024px){
    #sidebar{
        background-color:rgba(166, 166, 210,0.4);
    }
}

@media screen and (max-width:893px){
    #section1_part{
        display:flex;
        flex-direction:column-reverse;
        justify-content:center;
        align-items:center;
        row-gap:2%;
    }

    #section1_right_image{
        height:60%; 
        width:100%;
    }

    #section1_left_theme{
        font-size:6vmin;
        text-align:center;
    }

    .section1_left_para{
        font-size:3vmin;
        text-align:center;
    }

    .button_section1_left{
        width:95%;
        margin-left:3.5vmin;
    }
 }

@media screen and (max-width:778px){
    #upper_bar{
        display:flex;
        justify-content: center;
        align-items: center;
    }

    .button_section1_left{
     margin-left:2.6vmin;
    } 

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Website</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
    <div id="upper_bar">
     <p id="upper_para">Welcome to HelpHub - Where Solutions Meet Innovation!</p>
    </div>
    <header>
        <nav>
          <div id="logo_dark">
            <img id="pic_of_logo_dark" src="helphub_logo2.png">
          </div>
          <div id="logo_light">
            <img id="pic_of_logo_light" src="helphub_logo.png">
          </div>
          <div id="menubar">
           <input type="checkbox" id="click">
           <ul id="sidebar">
            <li><a href="#" class="menu_option">Products</a></li>
            <li><a href="#" class="menu_option">Customers</a></li>
            <li><a href="#" class="menu_option">Pricing</a></li>
            <li><a href="#" class="menu_option">Resources</a></li>
            <li><a class="button" href="#">Sign in</a></li>
            <li><a class="button" id="sign_up" href="#">Sign up</a></li>
           </ul>   
           <label for="click">
            <i class="fa-solid fa-bars" id="hamburger"></i>
          </label>
          </div>
        </nav>
    </header>
    <section id="section1">
      <div id="section1_part" class="common_width">
        <div id="section1_left">
           <h1 id="section1_left_theme">Innovate Together</h1>
           <br>
           <p class="section1_left_para">
            A central hub for collaborative innovation, where ideas come together to create something new.
           </p> 
           <p class="section1_left_para">
            We believe that innovation is a team sport, and within these walls, every player contributes to game-changing score
           </p>
           <br>
           <div class="button_section1_left" id="sign_up">Get Started</div>
        </div>
        <div id="section1_right">
          <img id="section1_right_image" src="man_using_laptop.jpg">
        </div>
      </div>
    </section>
</body>    
</html>

So,the upper writing "Welcome to HelpHub - Where Solutions Meet Innovation!" comes in one line on the laptop,but isn't coming in one line in phone/mobile though when seen through VS Code for mobile/phone width it is coming in one line

Hence can anyone help me with it of how to make it in one line for mobile width when seen through mobile itself?