CSS / HTML 网页溢出问题

Question

当前网页状态图片：

我是一名新程序员，目前正在自学 HTML / CSS / JavaScript。我正在练习制作网页并尝试通过弄脏自己的双手来摆脱教程沼泽。

我制作了一个令我满意的网页，这是我的第二个网页。我认为我的问题是我的 html 文件中的 .png 图像，因为当它加载时它加载非常大并且使页面溢出很多。即使在更改宽度并添加 overflow: hidden;它带走了滚动条，但页面仍然很乱。

我试过溢出：隐藏；在 html、body{} 和 img 标签本身。我将提供我的代码和当前页面的照片以向您展示问题。同时溢出隐藏将被关闭。

（link 中有该页面的照片）。代码贴在下方

* {
    margin: 0;
    padding: 0;
}

.wrapper {
    padding: 1170px;
    margin: auto;
}

img {
    max-width: 200px;
    max-height: 200px;
}

header {
    background-color: purple;
    background-image: url(../imgs/mountains.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    
}

<!DOCTYPE html>
<html>
    <head>
        <title>Practice2 page</title>
        <link rel="stylesheet" href="stylesheets/practice2.css">
    </head>
    <body>
        <header>
            <div class="wrapper">
                <div class="logo">
                    <img src="imgs/image1.png" alt="logo" width="200">
                </div>
                <ul class="nav-bar">
                    <li><a href="#">HomePage</a></li>
                    <li><a href="#">About Me</a></li>
                    <li><a href="#">Contact Me</a></li>
                    <li><a href="#">News</a></li>
                </ul>
            </div>

            <div class="hook">
                <h1>DeadInside</h1>
                <a href="#">Learn More</a>
            </div>
        </header>
    </body>
</html>

Answer 1

问题出在你的.wrapperclass，它有padding:1170px，这导致包装元素比主体

大得多

试试这个

.wrapper {
    padding: 10px;
    margin: auto;
}

您可以在所有定向中使用填充

padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;

更多关于属性 W3Schools

CSS / HTML 网页溢出问题

CSS / HTML overflow problem on a web page

html

css

windows

overflow