为什么我的网页宽度超出了我的视口？

Question

我有这个网页。网页的所有内容都在我桌面视口的大小之内。但是，页面的宽度仍然超出了视口。我什至尝试将边距和填充设置为 0，但没有任何效果。它在移动视图中看起来也特别尴尬。我该如何解决？

代码如下：

: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 class="max-width">
        <header class="header horizontal">
          <div class="title"><img loading="lazy" src="./logo-title.svg" alt="Title"></div> <input type="checkbox" class="nav-toggle-checkbox">
          <div class="nav-toggle-spans"><span class="nav-span-one"></span> <span class="nav-span-two"></span> <span class="nav-span-three"></span></div>
          <nav class="navbar"><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 class="vertical">
          <h2>2 Columns</h2>
          <div class="wrap columns-two">
            <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 class="vertical max-height">
          <h2>3 Columns</h2>
          <div class="wrap columns-three">
            <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 class="vertical">
          <hr>
          <h2>4 Columns</h2>
          <div class="wrap columns-four">
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
          </div>
          <hr>
        </section>
        <!--<ColumnsFour>-->
        <section class="vertical">
          <hr>
          <h2>6 Columns</h2>
          <div class="wrap columns-six">
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></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 class="socials"><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" class="s-jHz34e3aRDB7"></div>
  </div>


</body>

Answer 1

转到 CSS 的顶部并输入“* {width: 100%}”。如果这不起作用，您可能必须手动更改宽度，直到它适合您的视口大小。

如果对您有帮助，请标记为答案。

Answer 2

将页脚 CSS 宽度单位从 vw 更改为 %:

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

Answer 3

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre><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;
}

#svelte {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}
::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 class="max-width">
                <header class="header horizontal">
                    <div class="title"><img loading="lazy" src="./logo-title.svg" alt="Title"></div> <input type="checkbox" class="nav-toggle-checkbox">
                    <div class="nav-toggle-spans"><span class="nav-span-one"></span> <span class="nav-span-two"></span> <span class="nav-span-three"></span></div>
                    <nav class="navbar"><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 class="vertical">
                    <h2>2 Columns</h2>
                    <div class="wrap columns-two">
                        <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 class="vertical max-height">
                    <h2>3 Columns</h2>
                    <div class="wrap columns-three">
                        <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 class="vertical">
                    <hr>
                    <h2>4 Columns</h2>
                    <div class="wrap columns-four">
                        <div class="box"></div>
                        <div class="box"></div>
                        <div class="box"></div>
                        <div class="box"></div>
                    </div>
                    <hr>
                </section>
                <!--<ColumnsFour>-->
                <section class="vertical">
                    <hr>
                    <h2>6 Columns</h2>
                    <div class="wrap columns-six">
                        <div class="box"></div>
                        <div class="box"></div>
                        <div class="box"></div>
                        <div class="box"></div>
                        <div class="box"></div>
                        <div class="box"></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>
        </body>
        <div id="svelte-announcer" aria-live="assertive" aria-atomic="true" class="s-jHz34e3aRDB7"></div>
    </div>

    <footer>
        <p class="socials"><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>

为什么我的网页宽度超出了我的视口？

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

html

css

viewport

width

svelte