html - CSS没有显示在页面的特定部分

因此，我正在建立一个网站，正在整合样式表。我目前在页面的一个div部分未连接到样式表的问题。页面的其余部分都很好，但这只是这一节，我不知道为什么。我从初稿中复制并粘贴了它（html和样式），并使用了相同的字体和bootstrap cdn（bootstrap字体4.1和bootstrap cdn 3.3.7），但是得到了不同的结果。希望您能提供任何帮助。

这是HTML

<div class="main">
                    <div class="container">
                    <header>
                        <center><h2>My Work</h2></center>
                    </header>
                    <div class="box">
                        <span class="image featured"><img src="laptopstock.jpg" alt="" /></span>
                        <h3><a href="sampleofficial.html">Arris SURFboard SBG6700-AC Wireless Gateway Manual</a></h3>
                            <p>The Arris SURFboard SBG6700-AC wireless gateway is the premier modem on the market today. It's top of the line security, simple user interface and blazing fast speeds make it the number one consumer choice for modems. With this guide you can set up your home wireless network in 30 minutes.</p>
                            <br>
                            <p><a href="sampleofficial.html" class="button-alt">Learn More</a></p>
                        </div>
                    </div>
                </div>

这是CSS

        main {
            padding: 8em 0;
        }

            main.header {
                text-align: center;
                margin: 0em 0 3em 0;
                padding-top: 1000em;
            }
    /* difference between padding and margin?
    padding is on the inside.
    margin on the outside.*/
    /* this is the gray space between the header and the image */

                main.header h2 {
                    font-size: 2.75em;
                    margin: 0;
                    letter-spacing: .005em;
                    color: #000;
                }

        body.landing main {
            margin-top: -14em;
        }
    .container {
      margin-right: auto;
      margin-left: auto;
      padding-right: 15px;
      padding-left: 15px;
      width: 100%;
    }
.box {
                margin: 1em;
                overflow-x: hidden;
                padding: 2em 2em !important;
            }

                .box.features .features-row {
                    border-top: 0;
                    padding: 0;
                }

                    .box.features .features-row section {
                        border: 0;
                        border-top: solid 1px #e5e5e5 !important;
                        float: none;
                        margin: 2em 0 0 0 !important;
                        padding: 2em 0 0 0 !important;
                        width: 100%;
                    }

                    .box.features .features-row:first-child section:first-child {
                        border-top: 0 !important;
                        margin-top: 0 !important;
                        padding-top: 0 !important;
                    }

                .box .image.featured {
                    margin-left: -2em;
                    width: calc(100% + 4em);
                }

                    .box .image.featured:first-child {
                        margin-bottom: 2em;
                        margin-top: -2em;
                    }

                    .box .image.featured:last-child {
                        margin-bottom: -2em;
                        margin-top: 2em;
                    }

最佳答案

您的元素选择器错误。从您的html中，“ main”是一个类，“ header”是一个元素。要在CSS中引用类，请使用“。”与.main中一样，要引用元素，请直接使用标签名称。编写main.header的意思是元素“ main”具有所需的类“ header”。使用Css代替；

.main {
        padding: 8em 0;
    }

        .main header {
            text-align: center;
            margin: 0em 0 3em 0;
            padding-top: 1000em;
        }
/* difference between padding and margin?
padding is on the inside.
margin on the outside.*/
/* this is the gray space between the header and the image */

            .main header h2 {
                font-size: 2.75em;
                margin: 0;
                letter-spacing: .005em;
                color: #000;
            }

那应该工作。让我知道事情的后续。