Html 当我的宽度设置为100%时，为什么我的网站会横向滚动？_Html_Css

Html 当我的宽度设置为100%时，为什么我的网站会横向滚动？

html css

Html 当我的宽度设置为100%时，为什么我的网站会横向滚动？,html,css,Html,Css,所以我的网站因为某种原因会横向或横向滚动。这看起来像是页脚造成的，但我就是不知道这里会有什么问题？我认为这可能与页脚中的社交图标有关，但我不太确定。请提供一些指导我的网站在这里： HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JG.OFFICAL</title> <link rel="stylesheet" href="style.c

所以我的网站因为某种原因会横向或横向滚动。这看起来像是页脚造成的，但我就是不知道这里会有什么问题？我认为这可能与页脚中的社交图标有关，但我不太确定。请提供一些指导

我的网站在这里：

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JG.OFFICAL</title>
<link rel="stylesheet" href="style.css">
<!--fonts-->
<link href="https://fonts.googleapis.com/css?family=Montserrat:600" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
</head>

<body>
    <header>
        <div class= "logo">
            <!--h1>JG.OFFICIAL</h1-->
            <img src= "../images/logo.png" alt= "Hello" height ="60px" width ="310px">
        </div>       
        <nav> 
        <ul>
            <li><a href= "index.html">HOME</a></li>
            <li><a href= "work.html">WORK</a></li>
            <li><a href= "contact.html">CONTACT</a></li>
            <li><a href= "about.html">ABOUT</a></li>
        </ul>
        </nav> 
    </header>
    <br><br>
    <div id= "scroll1">
        <img src= "../images/scrollbutton.png" alt= "Click to scroll" height = "50" width = "50">
    </div>
    <div id= "img-wrapper">
        <img src= "../images/helloscreen.png" alt= "Hello" height= "870" width= "1228">
    </div>

    <div id= "text-wrapper2">
        <div id= "text">
            <p>Design is always in our lives, whether we like it or not.</p>
        </div>
    </div>

    <footer>
        <div class= "social-icons">
            <img src= "../images/fb-icon.png" alt= "Facebook" height= "45" weight= "45">
            <img src= "../images/yt-icon.png" alt= "YouTube" height= "45" weight= "45">
            <img src= "../images/instagram-icon.png" alt= "Instagram" height= "45" weight= "45">
            <img src= "../images/twitter-icon.png" alt= "Twitter" height= "45" weight= "45">
        </div>
    </footer>

</body>
</html>

您的页脚有

左填充：20px属性。如果您删除或更改它，横向滚动将消失
顺便说一句。。。检查这种情况的好方法是
* {
  background: #000 !important;
  color: #0f0 !important;
  outline: solid #f00 1px !important;
}

您的页脚有左填充：20px属性。如果您删除或更改它，横向滚动将消失
顺便说一句。。。检查这种情况的好方法是
* {
  background: #000 !important;
  color: #0f0 !important;
  outline: solid #f00 1px !important;
}

现在因为两个原因
图像的宽度为1228px
页脚的宽度为100%
+20px
填充
两者都将内容推到100%宽度上
。要解决此问题，您可以添加以下内容：
#img-wrapper img {
    max-width: 100%;
}

footer {
    box-sizing: border-box;
}  

你不想这种事再次发生？更全局地设置这些属性，它们可能会对您有所帮助。因此，您可以在CSS之上添加
* {
    box-sizing: border-box;
}

img {
    max-width: 100%;
}  

为什么使用框大小：边框框？

宽度和高度属性包括内容、填充和
边框，但不是边距
From:
现在，因为两个原因
图像的宽度为1228px
页脚的宽度为100%
+20px
填充
两者都将内容推到100%宽度上
。要解决此问题，您可以添加以下内容：
#img-wrapper img {
    max-width: 100%;
}

footer {
    box-sizing: border-box;
}  

你不想这种事再次发生？更全局地设置这些属性，它们可能会对您有所帮助。因此，您可以在CSS之上添加
* {
    box-sizing: border-box;
}

img {
    max-width: 100%;
}  

为什么使用框大小：边框框？

宽度和高度属性包括内容、填充和
边框，但不是边距
From:
/*将自然框布局模型应用于所有元素，但允许组件更改*/html{box size:border box；}*，*：before，*：after{box size:inherit；}
/*将自然框布局模型应用于所有元素，但允许组件更改*/html{box size:border box；}*，*：before，*：在{box size:inherit；}
之后，是否解决了此问题？如果没有，请添加评论或接受回答。问题解决了吗？如果没有，请添加评论或接受回答，好吗？