Question

Я целый день пытался сделать свой сайт более отзывчивым. Когда я делаю экран меньше, верхний 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

ожидаемый вывод

код

<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>

Painguin · Answer 1 · 26 марта 2020

Знаете ли вы, что у вас есть два отдельных экземпляра тега header в вашем HTML? Следовательно, в вашем CSS везде, где вы определяете стили для тега header, он будет применяться к обоим экземплярам.

Это не в коде, который вы прикрепили, а в HTML страница, на которую вы ссылались. При максимальной ширине 768 пикселей ваш медиазапрос имеет значение display: none; для header. Вы пытались удалить это?

Html заголовок тега покрывает экран мобильного телефона

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

1 Ответ

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Html заголовок тега покрывает экран мобильного телефона

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

1 Ответ

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Похожие темы