Fix CSS width issue on mobile - html

Question

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#import "variables";
#import "utilities";
body {
color: $neutral;
font-family: "Open Sans", sans-serif;
background-color: $main-bg;
}
a {
color: $cyan;
text-decoration: none;
}
ul {
list-style: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Raleway", sans-serif;
}
p {
font-family: "Raleway", sans-serif;
}
#header {
grid-area: heading;
height: 100vh;
background-color: $intro-email;
position: relative;
background-image: $bg-image;
background-size: contain;
background-repeat: no-repeat;
background-position: left bottom;
// &::before {
// content: "";
// background-image: $bg-image;
// position: absolute;
// width: 100%;
// background-size: contain;
// background-repeat: no-repeat;
// background-position: left bottom;
// }
.navbar {
grid-area: heading;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 6rem;
.nav-list {
display: flex;
li {
padding: 1rem 1.2rem;
text-transform: uppercase;
a {
text-decoration: none;
color: #fff;
text-transform: uppercase;
border-bottom: 3px transparent solid;
padding-bottom: 0.5rem;
transition: border-color 0.5s;
font-size: 0.8rem;
font-weight: 400;
font-family: "Raleway", sans-serif;
&:hover {
border-color: #fff;
}
&.current {
border-color: #fff;
}
}
}
}
}
.header-content {
max-width: 100%;
margin: 20px auto;
text-align: center;
width: 600px;
img {
max-width: 90%;
margin-top: -50px;
}
}
}
Variabes for CSS $intro-email: hsl(217, 28%, 15%);
$main-bg: hsl(218, 28%, 13%);
$footer-bg: hsl(216, 53%, 9%);
$testimonial-bg: hsl(219, 30%, 18%);
$neutral: hsl(0, 0%, 100%);
$cyan: hsl(176, 68%, 64%);
$blue: hsl(198, 60%, 50%);
$website-width: 1440px;
$bg-image: url("../img/bg-curvy-desktop.svg");
Container .container {
width: $website-width;
max-width: 100%;
padding: 2rem;
margin: 0 auto;
overflow: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" />
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght#400;700&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght#400;700&display=swap" rel="stylesheet" />
<header id="header">
<div class="container">
<div class="wrapper">
<nav class="navbar">
<img src="../dist/img/logo.svg" alt="" />
<ul class="nav-list">
<li>Features</li>
<li>Team</li>
<li>SignIn</li>
</ul>
</nav>
<div class="header-content">
<img src="../dist/img/illustration-intro.png" alt="" />
<h1 class="title">
All your files in one secue location, accessible anywhere
</h1>
<p class="text">
Flyo stores all your most important files in one secure location. Access them whenever you need, share and collaborate with friends, family and co-workers
</p>
<button class="btn-main">Get Started</button>
</div>
</div>
</div>[Image showing what is happening in my code][1]
</header>
Website width is set to 1440px but anytime i move to the mobile version on my screen, width of the website is never the same and some elements of the website begin to fall out of place of the website, is there a way to fix this or should i remove the container that i am nesting the elements in because that is the website width the design was made for

Answer 1

For your container, consider using a responsive width like width: 100vw (i.e. 100% of viewport/window width). Or, if you really want to stick with 1440px, you can use media queries.
Media queries help applying different CSS rules to different device screen sizes, as a dummy example:
#media(max-width: 599px) {
.container {
/* Your styling for mobile phones */
}
}
#media(min-width: 600px) {
/* Your styling for desktops */
}