HTML标头标签覆盖了移动设备的屏幕

时间：2020-03-26 20:09:33

标签： html css web responsive-design header

我整天都在尝试使网站更具响应性，当我缩小屏幕时，顶级div会占据整个屏幕。我是响应式网页设计的新手，我敢肯定，这与734行有关希望当我更改屏幕宽度时div会变小，但仍可见，该代码位于https://matthew-spina.github.io/Mathew-Spina.github.io/posts/Top-Ten-Ways-I-Got-Domain-Admin-on-Your-Internal-Network.html

expected output

代码

<html class="" lang="en"><head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My Portfolio</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900" rel="stylesheet">
    <link rel="stylesheet" href="libs/font-awesome/css/font-awesome.min.css">
    <link href="css/bootstrap.min.css" rel="stylesheet">
<style>
#HEADER_1 {
    bottom: 0;
    box-sizing: border-box;
    color: #fff;
    height: 296px;
    left: 0;
    position: relative;
    right: 0;
    text-align: center;
    text-decoration: none solid #fff;
    text-rendering: optimizelegibility;
    text-size-adjust: 100%;
    top: 0;
    width: 100%;
    column-rule-color: #fff;
    perspective-origin: 590px 148px;
    caret-color: #fff;
    background: #293a5c none repeat scroll 0 0/auto padding-box border-box;
    border: 0 none #fff;
    font: 18px/32.4px Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    outline: #fff none 0;
    overflow: hidden
}

#HEADER_1:after {
    box-sizing: border-box;
    color: #fff;
    text-align: center;
    text-decoration: none solid #fff;
    text-rendering: optimizelegibility;
    text-size-adjust: 100%;
    column-rule-color: #fff;
    caret-color: #fff;
    border: 0 none #fff;
    font: 18px/32.4px Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    outline: #fff none 0
}

#HEADER_1:before {
    box-sizing: border-box;
    color: #fff;
    text-align: center;
    text-decoration: none solid #fff;
    text-rendering: optimizelegibility;
    text-size-adjust: 100%;
    column-rule-color: #fff;
    caret-color: #fff;
    border: 0 none #fff;
    font: 18px/32.4px Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    outline: #fff none 0
}

#DIV_2 {
    box-sizing: border-box;
    color: #fff;
    height: 296px;
    max-width: 730px;
    text-align: center;
    text-decoration: none solid #fff;
    text-rendering: optimizelegibility;
    text-size-adjust: 100%;
    width: 730px;
    column-rule-color: #fff;
    perspective-origin: 365px 148px;
    caret-color: #fff;
    border: 0 none #fff;
    font: 18px/32.4px Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    margin: 0 auto;
    outline: #fff none 0;
    padding: 0 10px
}

#DIV_2:after {
    box-sizing: border-box;
    color: #fff;
    text-align: center;
    text-decoration: none solid #fff;
    text-rendering: optimizelegibility;
    text-size-adjust: 100%;
    column-rule-color: #fff;
    caret-color: #fff;
    border: 0 none #fff;
    font: 18px/32.4px Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    outline: #fff none 0
}

#DIV_2:before {
    box-sizing: border-box;
    color: #fff;
    text-align: center;
    text-decoration: none solid #fff;
    text-rendering: optimizelegibility;
    text-size-adjust: 100%;
    column-rule-color: #fff;
    caret-color: #fff;
    border: 0 none #fff;
    font: 18px/32.4px Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    outline: #fff none 0
}

#DIV_3 {
    box-sizing: border-box;
    color: #fff;
    height: 296px;
    text-align: center;
    text-decoration: none solid #fff;
    text-rendering: optimizelegibility;
    text-size-adjust: 100%;
    width: 710px;
    column-rule-color: #fff;
    perspective-origin: 355px 148px;
    caret-color: #fff;
    border: 0 none #fff;
    font: 18px/32.4px Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    outline: #fff none 0;
    padding: 65px 0
}

#DIV_3:after {
    box-sizing: border-box;
    color: #fff;
    text-align: center;
    text-decoration: none solid #fff;
    text-rendering: optimizelegibility;
    text-size-adjust: 100%;
    column-rule-color: #fff;
    caret-color: #fff;
    border: 0 none #fff;
    font: 18px/32.4px Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    outline: #fff none 0
}

#DIV_3:before {
    box-sizing: border-box;
    color: #fff;
    text-align: center;
    text-decoration: none solid #fff;
    text-rendering: optimizelegibility;
    text-size-adjust: 100%;
    column-rule-color: #fff;
    caret-color: #fff;
    border: 0 none #fff;
    font: 18px/32.4px Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    outline: #fff none 0
}

#H1_4 {
    box-sizing: border-box;
    color: #fff;
    height: 106px;
    text-align: center;
    text-decoration: none solid #fff;
    text-rendering: optimizelegibility;
    text-size-adjust: 100%;
    width: 710px;
    column-rule-color: #fff;
    perspective-origin: 355px 53px;
    caret-color: #fff;
    border: 0 none #fff;
    font: 800 38px/53.2px Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    margin: 0 0 25px;
    outline: #fff none 0
}

#H1_4:after {
    box-sizing: border-box;
    color: #fff;
    text-align: center;
    text-decoration: none solid #fff;
    text-rendering: optimizelegibility;
    text-size-adjust: 100%;
    column-rule-color: #fff;
    caret-color: #fff;
    border: 0 none #fff;
    font: 800 38px/53.2px Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    outline: #fff none 0
}

#H1_4:before {
    box-sizing: border-box;
    color: #fff;
    text-align: center;
    text-decoration: none solid #fff;
    text-rendering: optimizelegibility;
    text-size-adjust: 100%;
    column-rule-color: #fff;
    caret-color: #fff;
    border: 0 none #fff;
    font: 800 38px/53.2px Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    outline: #fff none 0
}

#DIV_5 {
    box-sizing: border-box;
    color: #fff;
    display: flex;
    height: 35px;
    text-align: center;
    text-decoration: none solid #fff;
    text-rendering: optimizelegibility;
    text-size-adjust: 100%;
    width: 710px;
    column-rule-color: #fff;
    align-items: center;
    justify-content: center;
    perspective-origin: 355px 17.5px;
    caret-color: #fff;
    border: 0 none #fff;
    font: 18px/32.4px Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    outline: #fff none 0
}

#DIV_5:after {
    box-sizing: border-box;
    color: #fff;
    display: block;
    text-align: center;
    text-decoration: none solid #fff;
    text-rendering: optimizelegibility;
    text-size-adjust: 100%;
    column-rule-color: #fff;
    caret-color: #fff;
    border: 0 none #fff;
    font: 18px/32.4px Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    outline: #fff none 0
}

#DIV_5:before {
    box-sizing: border-box;
    color: #fff;
    display: block;
    text-align: center;
    text-decoration: none solid #fff;
    text-rendering: optimizelegibility;
    text-size-adjust: 100%;
    column-rule-color: #fff;
    caret-color: #fff;
    border: 0 none #fff;
    font: 18px/32.4px Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    outline: #fff none 0
}

#FIGURE_6 {
    box-sizing: border-box;
    color: #fff;
    height: 35px;
    min-height: auto;
    min-width: auto;
    text-align: center;
    text-decoration: none solid #fff;
    text-rendering: optimizelegibility;
    text-size-adjust: 100%;
    width: 35px;
    column-rule-color: #fff;
    perspective-origin: 17.5px 17.5px;
    caret-color: #fff;
    border: 0 none #fff;
    border-radius: 50%;
    font: 18px/32.4px Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    margin: 0 15px 0 0;
    outline: #fff none 0;
    overflow: hidden
}

#FIGURE_6:after {
    box-sizing: border-box;
    color: #fff;
    text-align: center;
    text-decoration: none solid #fff;
    text-rendering: optimizelegibility;
    text-size-adjust: 100%;
    column-rule-color: #fff;
    caret-color: #fff;
    border: 0 none #fff;
    font: 18px/32.4px Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    outline: #fff none 0
}

#FIGURE_6:before {
    box-sizing: border-box;
    color: #fff;
    text-align: center;
    text-decoration: none solid #fff;
    text-rendering: optimizelegibility;
    text-size-adjust: 100%;
    column-rule-color: #fff;
    caret-color: #fff;
    border: 0 none #fff;
    font: 18px/32.4px Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    outline: #fff none 0
}

#IMG_7 {
    box-sizing: border-box;
    color: #fff;
    height: 35px;
    object-fit: cover;
    text-align: center;
    text-decoration: none solid #fff;
    text-rendering: optimizelegibility;
    text-size-adjust: 100%;
    vertical-align: middle;
    width: 35px;
    column-rule-color: #fff;
    perspective-origin: 17.5px 17.5px;
    caret-color: #fff;
    border: 0 none #fff;
    font: 18px/32.4px "object-fit: cover;";
    outline: #fff none 0
}

#IMG_7:after {
    box-sizing: border-box;
    color: #fff;
    text-align: center;
    text-decoration: none solid #fff;
    text-rendering: optimizelegibility;
    text-size-adjust: 100%;
    column-rule-color: #fff;
    caret-color: #fff;
    border: 0 none #fff;
    font: 18px/32.4px "object-fit: cover;";
    outline: #fff none 0
}

#IMG_7:before {
    box-sizing: border-box;
    color: #fff;
    text-align: center;
    text-decoration: none solid #fff;
    text-rendering: optimizelegibility;
    text-size-adjust: 100%;
    column-rule-color: #fff;
    caret-color: #fff;
    border: 0 none #fff;
    font: 18px/32.4px "object-fit: cover;";
    outline: #fff none 0
}

#P_8 {
    box-sizing: border-box;
    color: #fff;
    height: 16px;
    min-height: auto;
    min-width: auto;
    text-align: center;
    text-decoration: none solid #fff;
    text-rendering: optimizelegibility;
    text-size-adjust: 100%;
    width: 256px;
    column-rule-color: #fff;
    perspective-origin: 128px 8px;
    caret-color: #fff;
    border: 0 none #fff;
    font: 14px/16.8px Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    margin: 0;
    outline: #fff none 0
}

#P_8:after {
    box-sizing: border-box;
    color: #fff;
    text-align: center;
    text-decoration: none solid #fff;
    text-rendering: optimizelegibility;
    text-size-adjust: 100%;
    column-rule-color: #fff;
    caret-color: #fff;
    border: 0 none #fff;
    font: 14px/16.8px Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    outline: #fff none 0
}

#P_8:before {
    box-sizing: border-box;
    color: #fff;
    text-align: center;
    text-decoration: none solid #fff;
    text-rendering: optimizelegibility;
    text-size-adjust: 100%;
    column-rule-color: #fff;
    caret-color: #fff;
    border: 0 none #fff;
    font: 14px/16.8px Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    outline: #fff none 0
}

#TIME_9 {
    box-sizing: border-box;
    color: #fff;
    text-align: center;
    text-decoration: none solid #fff;
    text-rendering: optimizelegibility;
    text-size-adjust: 100%;
    column-rule-color: #fff;
    perspective-origin: 0 0;
    caret-color: #fff;
    border: 0 none #fff;
    font: 14px/16.8px Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    outline: #fff none 0
}

#TIME_9:after {
    box-sizing: border-box;
    color: #fff;
    text-align: center;
    text-decoration: none solid #fff;
    text-rendering: optimizelegibility;
    text-size-adjust: 100%;
    column-rule-color: #fff;
    caret-color: #fff;
    border: 0 none #fff;
    font: 14px/16.8px Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    outline: #fff none 0
}

#TIME_9:before {
    box-sizing: border-box;
    color: #fff;
    text-align: center;
    text-decoration: none solid #fff;
    text-rendering: optimizelegibility;
    text-size-adjust: 100%;
    column-rule-color: #fff;
    caret-color: #fff;
    border: 0 none #fff;
    font: 14px/16.8px Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    outline: #fff none 0
}

body {
    font-family: Lato, sans-serif;
    font-size: 16px;
    display: inline
}

@keyframes dropHeader {
    0% {
        transform: translateY(-100%)
    }
    100% {
        transform: translateY(0)
    }
}

header.main {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 10;
    animation-name: dropHeader;
    animation-iteration-count: 1;
    animation-timing-function: ease;
    animation-duration: .75s
}

header ul {
    display: inline-block;
    background: #fff;
    text-align: center;
    padding: 10px;
    margin: 0;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px
}

header li {
    display: inline-block
}

header a {
    display: block;
    color: #3498db;
    padding: 10px
}

header a:hover {
    color: #217dbb;
    text-decoration: none;
    background: #eee;
    border-radius: 4px
}

header a:focus {
    color: #3498db;
    text-decoration: none
}

#mobile-menu-open {
    display: none;
    cursor: pointer;
    position: fixed;
    right: 15px;
    top: 10px;
    color: #3498db;
    font-size: 1.5em;
    z-index: 20;
    padding: 0 7px;
    border-radius: 4px;
    background: #dcd9d9
}

#mobile-menu-close {
    display: none;
    text-align: center;
    width: 100%;
    background: #dcd9d9;
    font-size: 1.5em;
    padding-right: 15px;
    padding-top: 10px;
    cursor: pointer;
    color: #3498db
}

#mobile-menu-close span {
    font-size: .5em;
    text-transform: uppercase
}

#mobile-menu-close i {
    vertical-align: middle
}

.top {
    text-align: center
}

.top span {
    cursor: pointer;
    display: block;
    margin: 15px auto 0 auto;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: 3px solid #b9bfc4;
    text-align: center
}

.top i {
    color: #74808a
}

.shadow {
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24)
}

.shadow-large {
    box-shadow: 0 3px 6px rgba(0, 0, 0, .08), 0 3px 6px rgba(0, 0, 0, .15)
}

#lead {
    position: relative;
    height: 100vh;
    min-height: 500px;
    max-height: 1080px;
    background: url(https://res.cloudinary.com/jav0/image/upload/v1580348386/lead-bg_dh3opu.jpg);
    background-size: cover;
    padding: 15px;
    overflow: hidden
}

#lead-content {
    position: absolute;
    z-index: 10;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center
}

#lead-content h1,
#lead-content h2 {
    margin: 0
}

#lead-content h1 {
    color: #dcd9d9;
    font-weight: 900;
    font-size: 5em;
    text-transform: uppercase;
    letter-spacing: .05em;
    line-height: .9em
}

#lead-content h2 {
    color: #a0cfee;
    font-weight: 500;
    font-size: 2.25em;
    margin-bottom: 15px
}

@keyframes pulsate {
    0% {
        transform: scale(1, 1)
    }
    50% {
        transform: scale(1.2, 1.2)
    }
    100% {
        transform: scale(1, 1)
    }
}

#about {
    background-color: #f2f2f5;
    padding: 40px 15px;
    border-bottom: 1px solid #dcd9d9
}

#about h2 {
    color: #374054
}

#about p {
    color: #74808a;
    margin: 0
}

#experience {
    padding: 50px 15px;
    text-align: center;
    border-bottom: 1px solid #dcd9d9
}

#experience h2 {
    color: #374054
}

#education {
    padding: 50px 15px 20px 15px;
    border-bottom: 1px solid #dcd9d9;
    text-align: center
}

#education h2 {
    color: #374054;
    margin-bottom: 50px
}

#projects {
    padding: 50px 15px;
    border-bottom: 1px solid #dcd9d9;
    text-align: center
}

#projects h2 {
    color: #374054;
    margin-bottom: 50px
}

#skills {
    padding: 50px 15px;
    text-align: center;
    background: #f2f2f5
}

#skills h2 {
    color: #374054;
    margin-bottom: 50px
}

#skills ul {
    display: block;
    margin: 0 auto;
    padding: 0;
    max-width: 800px;
    border-bottom: 1px solid #dcd9d9
}

#skills li {
    display: inline-block;
    margin: 7px;
    padding: 5px 10px;
    color: #374054;
    background: #e4e4ea;
    list-style: none;
    cursor: default;
    font-size: 1.2em;
    border-bottom: 1px solid #dcd9d9
}

#contact {
    padding: 50px 15px;
    background: #3498db;
    text-align: center
}

#contact h2 {
    margin: 0 0 15px 0;
    color: #dcd9d9;
    font-weight: 500
}

@media only screen and (max-width:992px) {
    #lead {
        height: auto;
        min-height: auto;
        max-height: auto;
        padding: 100px 15px
    }
    #lead-content {
        position: relative;
        transform: none;
        left: auto;
        top: auto
    }
    #lead-content h1 {
        font-size: 3em
    }
    #lead-content h2 {
        font-size: 1.75em
    }
    #about {
        text-align: center
    }
    #about p {
        text-align: left
    }
}

@media only screen and (max-width:768px) {
    header {
        position: relitive;
        z-index: 999;
        animation: none;
        bottom: 0;
        height: 100%
    }
    #mobile-menu-close,
    #mobile-menu-open {
        display: block
    }
    #menu {
        height: 100%;
        overflow-y: auto;
        box-shadow: none;
        border-radius: 0;
        width: 100%
    }
    #menu li {
        display: block;
        margin-bottom: 10px
    }
    #lead-content h1 {
        font-size: 2em
    }
    #lead-content h2 {
        font-size: 1.3em
    }
    #lead-content a {
        padding: 10px 20px
    }
}

@media only screen and (max-width:480px) {
    #lead-content h1 {
        font-size: 1.5em
    }
    #lead-content h2 {
        font-size: 1em
    }
    #lead-content a {
        font-size: .9em;
        padding: 5px 10px
    }
}
</style>
<script src="https://cdn.themesinfo.com/detector.js"></script></head>

<body data-gr-c-s-loaded="true">
    <div id="mobile-menu-open" class="shadow-large">
        <i class="fa fa-bars" aria-hidden="true"></i>
    </div>
    <!-- End #mobile-menu-toggle -->
    <header class="main">
        <div id="mobile-menu-close">
            <span>Close</span> <i class="fa fa-times" aria-hidden="true"></i>
        </div>
        <ul id="menu" class="shadow">
            <li>
                <a href="#about" style="text-decoration: none">About</a>
            </li>
            <li>
                <a href="#experience" style="text-decoration: none">Experience</a>
            </li>
            <li>
                <a href="#education" style="text-decoration: none" >Education</a>
            </li>
            <li>
                <a href="#projects" style="text-decoration: none">Blog</a>
            </li>
            <li>
                <a href="#skills"style="text-decoration: none" >Skills</a>
            </li>
            <li>
                <a href="#contact" style="text-decoration: none">Contact</a>
            </li><li>
                <a href="#services" style="text-decoration: none">Services</a>
            </li>
        </ul>
    </header>
    <!-- End header -->


        <!-- End #lead-content -->



    <!-- End #lead -->
    <header id="HEADER_1" style="z-index: -10;text-align: center">
        <div id="DIV_2">
            <div id="DIV_3">
                <h1 id="H1_4" style="text-align: center;width: 100%;">
                    Top Five ways to get domain admin (2020)
                </h1>
                <div id="DIV_5">
                    <figure id="FIGURE_6">
                        <img alt="" src="https://avatars2.githubusercontent.com/u/62260815?s=460&u=85c22a054bdba183076a642b9da45556dedb104c&v=4" height="70" width="100%" id="IMG_7" />
                    </figure>
                    <p id="P_8">
                        by Matthew Spina · Updated
                        <time id="TIME_9">
                            Mar. 25, 2020
                        </time>
                    </p>
                </div>
            </div>
        </div>
    </header>


    <div id="about"> 
        <div class="container">
            <div class="row">
                <div class="col-md-4">

                </div>
                <div class="col-md-8" style="padding-left: 25%; padding-right: 25%; font-size: 21px; font-family: Arial, Helvetica, sans-serif;color: #676767;">
                    <p>
                     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce consequat laoreet lacinia. Quisque sed nunc id velit ultricies malesuada. Maecenas ornare dolor at orci vulputate viverra vel eu erat. Morbi vel efficitur est. Vivamus dapibus justo a felis ullamcorper, in interdum lorem dignissim. Cras eget enim malesuada, rutrum sem id, eleifend tellus. Ut ultricies condimentum ex eu finibus. Duis facilisis congue volutpat. Fusce lacus arcu, iaculis et venenatis sit amet, congue sit amet erat. Aenean in ipsum et orci cursus efficitur in id tellus. Donec quis quam gravida massa gravida pretium. Etiam orci urna, ultrices eu sollicitudin sit amet, tincidunt nec nunc.

                        Quisque fringilla pellentesque




                            mollis. Mauris ullamcorper mauris metus, in mattis elit aliquam quis. Phasellus nec fringilla leo, et ultrices quam. Mauris vulputate tempor enim vel vehicula. Sed at aliquet felis. Fusce felis quam, gravida fermentum sollicitudin ac, condimentum ut sem. Nam ante quam, pharetra eget iaculis a, auctor in neque. In tincidunt a nisi quis placerat. Sed varius ornare euismod. Cras volutpat diam in velit porttitor molestie. Fusce porta, urna vulputate pellentesque hendrerit, sem lorem suscipit felis, a pretium massa metus eleifend nunc.

                        Morbi pulvinar velit in tempus laoreet. Vestibulum non laoreet nunc. Sed ac orci et sapien iaculis accumsan ut a elit. Nam tincidunt mi quis risus convallis dignissim. Curabitur molestie mauris et rhoncus iaculis. Aliquam ipsum nisl, malesuada a egestas id, fringilla nec massa. Integer sagittis tincidunt sapien pulvinar tincidunt. Praesent vel eleifend enim. Nulla facilisi. Nulla aliquam rutrum massa. Curabitur dapibus orci ex, ac dapibus est faucibus quis.

                        Integer id vestibulum nunc. Cras tristique, tellus eget sollicitudin sollicitudin, felis nunc sollicitudin erat, non ornare quam dui ac tortor. Aliquam elementum nunc mauris, non laoreet leo rutrum et. Integer mattis magna at aliquam facilisis. Nullam convallis ultricies erat sit amet volutpat. Praesent vel laoreet lorem, nec sagittis justo. Aliquam augue tortor, congue sed ornare vel, bibendum ut augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec auctor libero ac dolor consequat, et iaculis urna porttitor. Sed ornare, massa ut pellentesque pretium, enim lorem pellentesque magna, eget laoreet eros dolor at augue.

                        Maecenas maximus nunc et dui sagittis, sed porttitor mauris elementum. Praesent et interdum nulla, non faucibus ante. Pellentesque sit amet arcu quis tellus porttitor fringilla sit amet eget tortor. Curabitur tincidunt velit nisl, non porttitor felis fringilla vitae. Aenean fermentum malesuada magna et consequat. Phasellus lobortis mollis malesuada. Aenean id arcu leo.  
                    </p>
                </div>
            </div>
        </div>
    </div>





    <!-- End #skills -->

    <div id="contact">
        <h2>Get in Touch</h2>
        <div id="contact-form">
            <form action="https://mailthis.to/MatthewSpina" method="POST" enctype="multipart/form-data">
                <input type="text" name="name" placeholder="Your name">
                <input type="email" name="_replyto" placeholder="Your Email">
                <textarea name="message" placeholder="Enter your message here"></textarea>
                <input type="hidden" name="_subject" value="Contact form submitted">
                <input type="hidden" name="_after" value="/ThankYou.html">
                <input type="hidden" name="_honeypot" value="">
                <input type="hidden" name="_confirmation" value="">
                <input type="submit" value="Send">
            </form>

        </div>
        <!-- End #contact-form -->
    </div>
    <!-- End #contact -->

    <footer>
        <div class="container">
            <div class="row">
                <div class="col-sm-5 copyright"style="text-align:center;">
                    <p>
                        Copyright © 2020 Matthew Spina
                    </p>
                </div>
                <div class="col-sm-2 top">
                    <span id="to-top">
                        <i class="fa fa-chevron-up" aria-hidden="true"></i>
                    </span>
                </div>
                <div class="col-sm-5 social">
                    <ul>
                        <li>
                            <a href="https://github.com/" target="_blank"><i class="fa fa-github" aria-hidden="true"></i></a>
                        </li>
                        <li>
                            <a href="https://stackoverflow.com/" target="_blank"><i class="fa fa-stack-overflow" aria-hidden="true"></i></a>
                        </li>
                        <li>
                            <a href="https://linkedin.com/" target="_blank"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
                        </li>
                        <li>
                            <a href="https://www.facebook.com/" target="_blank"><i class="fa fa-facebook" aria-hidden="true"></i></a>
                        </li>
                        <li>
                            <a href="https://twitter.com/" target="_blank"><i class="fa fa-twitter" aria-hidden="true"></i></a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </footer>
    <!-- End footer -->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="js/scripts.min.js"></script>



</body></html>

1 个答案:

答案 0 :(得分：1)

您是否知道HTML中有header标签的两个单独的实例？因此，在CSS中，您为header标记定义样式的任何地方都将应用于两个实例。

这不在您附加的代码中，而是在您引用的HTML页面上。在最大宽度768px处，您的媒体查询的display: none;值为header。您是否尝试过删除它？

enter image description here

相关问题
最新问题