Why does the width of my web page extend beyond my viewport?-CodePudding

I have this web page. All the content of the web page is within the size of my desktop's view port. However, the width of the page still goes beyond the view port. I even tried putting margin and padding at 0 but nothing worked. It also looks especially awkward in mobile view. How do I fix that?

Below is the code:

:root {
--main-color:#ff9955ff;
--secondary-color:yellow;
--dark-color:#444;
--light-color:#fafafa;
}
body {
font-family: Montserrat, sans-serif;
background: var(--light-color);
color: var(--dark-color);
text-align: justify;
margin: 0px;
padding: 0px;
display: flex;
flex-direction: column;
align-items: center;
padding: 10px;
font-size: 18px;
}

::selection {
    background: var(--main-color);
    color: var(--light-color);
}

a {
    text-decoration: none;
    color: var(--dark-color);
}
input {
box-sizing: border-box;
}

.box {
    background: red;
    height: 100px;
    width: 100px;
}
.center-text {
    text-align: center;
}
.columns-two, .columns-three, .columns-four, .columns-six {
    display: flex;
    flex-direction: row;
    align-items: center;
    align-content: center;
    justify-content: center;
    gap: 30px;
}
.columns-two div {
    width: clamp(480px, 480px, 100%);
}
.columns-three div {
    width: clamp(200px, calc((1000px - (30px * 2)) / 3), 100%);
}
.columns-four div {
    width: calc((1000px - (30px * 3)) / 4);
}
.columns-six div {
    width: calc((1000px - (30px * 5)) / 6);
}
.horizontal {
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    gap: 20px;
}

.max-height {
    min-height: 100vh;
}
.half-height {
    min-height: calc(100vh / 2);
}
.max-width {
    width: clamp(200px, 90vw, 1000px);
}
.vertical {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    justify-content: center;
}
.wrap {
    display: flex;
    flex-wrap: wrap;
}

/* header */
.header {
    height: 70px;
    justify-content: space-between;
}
.title {
    height: 100%;
}
.title img {
    height: 100%;
    width: clamp(0px,250px,60%);
}
.nav-toggle-checkbox, .nav-toggle-spans {
    position: fixed;
    top: 2.5%;
    right: -100vw;
    height: clamp(10px,80px,20vw);
    width: clamp(10px,80px,20vw);
}
.nav-toggle-checkbox {
    opacity: 0;
}
.nav-toggle-spans span {
    height: 20%;
    background: var(--main-color);
    margin: 10% 0;
    display:flex;
    flex-direction: row;
    z-index: 2;
    transition: 400ms;
}
.navbar {
    display: flex;
    gap: 2.5px;
    transition: 300ms;
}
.navbar a {
    margin: 5px;
}

/* footer */
footer {
    background: var(--main-color);
    width: 100vw;
    padding: 20px 0;
    text-align: center;
}
.socials {
    gap: 10px;
}
footer img {
    height: 50px;
    width: 50px;
}


@media screen and (max-width:700px) {
    .nav-toggle-checkbox, .nav-toggle-spans {
        right: 5%;
        transition: 400ms;
    }
    .nav-toggle-spans {
        z-index: 2;
    }
    .nav-toggle-checkbox {
        z-index: 3;
    }
    .nav-toggle-checkbox:checked ~ .nav-toggle-spans span {
        background: var(--light-color);
        transition: 400ms;
    }
    .nav-toggle-checkbox:checked ~ .nav-toggle-spans .nav-span-one {
        position: relative;
        top: 30%; /* Changed from 100% */
        transform: rotate(45deg);
        transition: 400ms;
    }
    .nav-toggle-checkbox:checked ~ .nav-toggle-spans .nav-span-two {
        opacity: 0;
    }
    .nav-toggle-checkbox:checked ~ .nav-toggle-spans .nav-span-three {
        position: relative;
        top: -30%;
        transform: rotate(-45deg);
        transition: 400ms;
    }
    .navbar, .nav-toggle-checkbox:not(:checked) ~ .navbar {
        position:fixed;
        top: 0;
        right: -100vh;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content:flex-start;
        background: var(--main-color);
        opacity: 90%;
        border-left: 4px solid var(--secondary-color);
        padding: 150px 5% 0 50px;
        z-index: 1;
        transition: 400ms;
    }
    .nav-toggle-checkbox:checked ~ .navbar {
        right: 0;
        transition: 400ms;
    }
    .nav-toggle-checkbox:checked ~ .navbar a {
        color: var(--light-color);
        text-align: right;
        font-size: 1.25em;
    }
}

<body tabindex="-1">
  <div id="svelte">

    <body>
      <div >
        <header >
          <div ><img loading="lazy" src="./logo-title.svg" alt="Title"></div> <input type="checkbox" >
          <div ><span ></span> <span ></span> <span ></span></div>
          <nav ><a href="/">Home</a> <a href="elements">Elements</a> <a href="services">Services</a> <a href="contact">Contact</a></nav>
        </header>
        <!--<Header>-->

        <head>
          <title>Home - CSS Templates</title>
        </head>
        <section >
          <h2>2 Columns</h2>
          <div >
            <div>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Amet luctus
                venenatis lectus magna fringilla urna porttitor rhoncus dolor. Nisi quis
                eleifend quam adipiscing vitae proin sagittis nisl. Ipsum dolor sit amet
                consectetur adipiscing. Eu consequat ac felis donec et odio pellentesque
                diam. Volutpat commodo sed egestas egestas fringilla phasellus faucibus
                scelerisque. Sem et tortor consequat id porta nibh venenatis cras. Sed
                faucibus turpis in eu mi bibendum neque egestas congue. Etiam non quam
                lacus suspendisse faucibus interdum posuere lorem. Malesuada fames ac
                turpis egestas maecenas pharetra. Lorem ipsum dolor sit amet
                consectetur. Ut enim blandit volutpat maecenas volutpat blandit aliquam
                etiam erat. Id aliquet risus feugiat in ante metus.</p>
            </div>
            <div>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Amet luctus
                venenatis lectus magna fringilla urna porttitor rhoncus dolor. Nisi quis
                eleifend quam adipiscing vitae proin sagittis nisl. Ipsum dolor sit amet
                consectetur adipiscing. Eu consequat ac felis donec et odio pellentesque
                diam. Volutpat commodo sed egestas egestas fringilla phasellus faucibus
                scelerisque. Sem et tortor consequat id porta nibh venenatis cras. Sed
                faucibus turpis in eu mi bibendum neque egestas congue. Etiam non quam
                lacus suspendisse faucibus interdum posuere lorem. Malesuada fames ac
                turpis egestas maecenas pharetra. Lorem ipsum dolor sit amet
                consectetur. Ut enim blandit volutpat maecenas volutpat blandit aliquam
                etiam erat. Id aliquet risus feugiat in ante metus.</p>
            </div>
          </div>
        </section>
        <!--<ColumnsTwo>-->
        <section >
          <h2>3 Columns</h2>
          <div >
            <div>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Amet luctus
                venenatis lectus magna fringilla urna porttitor rhoncus dolor. Nisi quis
                eleifend quam adipiscing vitae proin sagittis nisl. Ipsum dolor sit amet
                consectetur adipiscing. Eu consequat ac felis donec et odio pellentesque
                diam. Volutpat commodo sed egestas egestas fringilla phasellus faucibus
                scelerisque. Sem et tortor consequat id porta nibh venenatis cras. Sed
                faucibus turpis in eu mi bibendum neque egestas congue.</p>
            </div>
            <div>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Amet luctus
                venenatis lectus magna fringilla urna porttitor rhoncus dolor. Nisi quis
                eleifend quam adipiscing vitae proin sagittis nisl. Ipsum dolor sit amet
                consectetur adipiscing. Eu consequat ac felis donec et odio pellentesque
                diam. Volutpat commodo sed egestas egestas fringilla phasellus faucibus
                scelerisque. Sem et tortor consequat id porta nibh venenatis cras. Sed
                faucibus turpis in eu mi bibendum neque egestas congue.</p>
            </div>
            <div>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Amet luctus
                venenatis lectus magna fringilla urna porttitor rhoncus dolor. Nisi quis
                eleifend quam adipiscing vitae proin sagittis nisl. Ipsum dolor sit amet
                consectetur adipiscing. Eu consequat ac felis donec et odio pellentesque
                diam. Volutpat commodo sed egestas egestas fringilla phasellus faucibus
                scelerisque. Sem et tortor consequat id porta nibh venenatis cras. Sed
                faucibus turpis in eu mi bibendum neque egestas congue.</p>
            </div>
          </div>
        </section>
        <!--<ColumnsThree>-->
        <section >
          <hr>
          <h2>4 Columns</h2>
          <div >
            <div ></div>
            <div ></div>
            <div ></div>
            <div ></div>
          </div>
          <hr>
        </section>
        <!--<ColumnsFour>-->
        <section >
          <hr>
          <h2>6 Columns</h2>
          <div >
            <div ></div>
            <div ></div>
            <div ></div>
            <div ></div>
            <div ></div>
            <div ></div>
          </div>
          <hr>
        </section>
        <!--<ColumnsSix>-->
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
          incididunt ut labore et dolore magna aliqua. Amet luctus venenatis lectus
          magna fringilla urna porttitor rhoncus dolor. Nisi quis eleifend quam
          adipiscing vitae proin sagittis nisl. Ipsum dolor sit amet consectetur
          adipiscing. Eu consequat ac felis donec et odio pellentesque diam. Volutpat
          commodo sed egestas egestas fringilla phasellus faucibus scelerisque. Sem et
          tortor consequat id porta nibh venenatis cras. Sed faucibus turpis in eu mi
          bibendum neque egestas congue. Etiam non quam lacus suspendisse faucibus
          interdum posuere lorem. Malesuada fames ac turpis egestas maecenas pharetra.
          Lorem ipsum dolor sit amet consectetur. Ut enim blandit volutpat maecenas
          volutpat blandit aliquam etiam erat. Id aliquet risus feugiat in ante metus.</p>
      <footer>
        <p ><a href="www.facebook.com" target="_blank"><img src="https://upload.wikimedia.org/wikipedia/commons/f/fb/Facebook_icon_2013.svg" alt="facebook"></a>&nbsp;&nbsp;
          <a href="www.facebook.com" target="_blank"><img src="https://upload.wikimedia.org/wikipedia/commons/f/fb/Facebook_icon_2013.svg" alt="facebook"></a>&nbsp;&nbsp;
          <a href="www.facebook.com" target="_blank"><img src="https://upload.wikimedia.org/wikipedia/commons/f/fb/Facebook_icon_2013.svg" alt="facebook"></a></p>
        <p>This website was designed by <a href="google.com">Name</a></p>
      </footer>
    </body>
    <div id="svelte-announcer" aria-live="assertive" aria-atomic="true" ></div>
  </div>


</body>

CodePudding user response：

Go to the top of the CSS and put "* {width: 100%}". If that doesn't work, you might have to manually change the width until it fits the size of your viewport.

Please mark this as an answer if this helped you.

CodePudding user response：

Change the footer CSS width unit from vw to %:

footer {
    background: var(--main-color);
    width: 100%;
    padding: 20px 0;
    text-align: center;
}