html - 图像、部分和滚动条的问题

Question

第一个问题是“关于我自己”(home_about_box)，做一些不允许我把它放在图像之上的事情。我觉得跟margin有关系，但是我还没找到解决方法。

第二个问题是投资组合部分 (portfolio_home) 中的图片不会相互接触，图片之间会留有空白。

最后一个问题是我的页面底部有一个水平滚动条。我已经搜索了解决方案，但没有找到任何解决方案。

如果您有任何解决方案，我将不胜感激您发布代码和解释，因为我对此很陌生!

干杯!非常感谢任何建设性的反馈!

HTML

   <section class="home.about">
     <div class="about.bg"> 
        <div class="home_about_box">
            <h1>About Myself</h1>
            <p>Lorem ipsum...</p>
            <p>Lorem ipsum...</p>
        </div>
    </div>
  </section>


<section class="portfolio_home" id="portfolio">
    <h1>Some of my work</h1>
    <figure class="port-item">
        <!-- Portfolio 1 -->
    <img src="https://i.imgur.com/eBRYWII.png" alt="portfolio item"/> 
        <figcaption class="port-desc">
            <p>Geofilters</p>
        </figcaption>
    </figure>
        <!-- Portfolio 2 -->
    <figure class="port-item">
    <img src="https://i.imgur.com/gAfgliA.png" alt="portfolio item"/> 
            <figcaption class="port-desc">
            <p>Quixz eSports</p>
        </figcaption>
    </figure>
        <!-- Portfolio 3 -->
    <figure class="port-item">
    <img src="https://i.imgur.com/IjoGmUT.png" alt="portfolio item"/> 
            <figcaption class="port-desc">
            <p>3D Renders</p>
        </figcaption>
    </figure>
        <!-- Portfolio 4 -->
    <figure class="port-item">
    <img src="https://i.imgur.com/4zymXa8.png" alt="portfolio item"/>
            <figcaption class="port-desc">
            <p>Backgrounds</p>
        </figcaption>
    </figure>
</section>

<section class="cta">
    <div class="container">
      <h1 class="title title-cta">Want to see more?
        <span>Then what are you waiting for?</span>
      </h1>
      <a href="#portfolio" class="button_dark">See More</a>
    </div>
</section>

CSS

* {
    box-sizing: border-box;
    transition: all ease-in-out 250ms;
}

body {
    margin: 0; 
    font-family: "Lato", sans-serif;
    text-align: center; 
}

img {
    max-width: 100%;
    height: auto;
    padding: 1em .5em 0;
    background-size: cover;
}

.container {
    width: calc(100%-4px);
    margin: 0 auto;
}

/* Header
========= */
header {
    position: absolute;
    width: 100%;
}
nav ul {
    margin: 0;
    padding: 1em 0;
    list-style: none;
}

nav li {
    display: inline-block;
    margin: .5em
}

nav a {
    font-weight: 900;
    text-decoration: none;
    text-transform: uppercase;
    font-size: .9rem;
    padding: .5em;
    color: #FFF;
}

nav a:hover,
nav a:focus{
    color: #DDD;
}

@media (min-width: 60rem) {
    .logo{
        float: left;
        text-align: center;
        align-content: center;
    }

    nav{
        float: right;
        text-align: center;
        margin-right: 1em;
    }
}

/* Buttons
========== */
.button_top {
    display: inline-block;
    font-size: 1.3rem;
    text-decoration: none;
    text-transform: uppercase;
    border-width: 2px;
    border-style: solid;
    border-color: #174FC1;
    padding: .5em 1em;
    color: #FFF;
}

.button_top:hover,
.button_top:focus {
    background: #174FC1;
    color: #FFF;
}

.button_dark {
    display: inline-block;
    font-size: 1.3rem;
    text-decoration: none;
    text-transform: uppercase;
    border-width: 2px;
    border-style: solid;
    border-color: #FFF;
    padding: .5em 1em;
    color: #FFF;
    margin-bottom: 1em;
}

.button_dark:hover,
.button_dark:focus {
    background: #FFF;
    color: #000;
}

@media  (min-width: 25rem) {
    .button_top {
        font-size: 1.7rem;
        padding: .3em 1em
    }
}


@media  (min-width: 60rem) {
    .button_top {
        font-size: 2.4rem;
        padding: .3em 1em;
        margin-top: -1em;
    }
}

@media  (min-width: 25rem) {
    .button_dark {
        font-size: 1.7rem;
        padding: .3em 1em
    }
}


@media  (min-width: 60rem) {
    .button_dark {
        font-size: 2rem;
        padding: .3em 1em;
    }
}


.clearfix::after,
section::after,
footer::after{
    content:  "";
    display: block;
    clear: both;
}


/* Typography
========= */

.title {
    font-size: 2rem;
    margin-bottom: 1.6em;
    margin-top: 5em;
}

.title span {
    font-weight: 300;
    display: block;
    font-size: 1.3rem;
}

.title-cta {
    margin: 0 0 1em;
}

@media (min-width: 60rem) {
    .title{
        font-size: 4rem;
        margin-top: 1.5em;
    }
}

h1 {
    font-weight: 800;
    margin-top: 0;
}

.unstyled-list {
    margin: 0;
    padding: 1.3em;
    list-style-type: none;
    text-align: left;
}

/* Home.hero
========= */

    .home-hero {
      background-image: url(https://i.imgur.com/yUFKqAe.jpg);
      background-size: cover;
      background-position: center;
      padding: 1em;
      color: #FFF;
      width: 100vw;
      height: 100vh;
       }

@media (min-width: 25rem) {
    .home-hero{
        width: 100vw;
        height: 100vh;
    }
}


@media (min-width: 60rem) {
    .home-hero{
        width: 100vw;
        height: auto;
    }
}

@media (min-height: 30rem) {
    .home-hero{
        width: 100vw;
        height: 100vh;
    }
}

/*Home About */

.home_about_box {
    background-color: #232323;
    font-size: .8em;
    padding: 4em;
    outline: 2px solid #174fc1;
    outline-offset: -3em;
    color: #FFF;
    position: relative
}

.home_about_box h1 {
    color: #174fc1;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 1.3em;
    background: #232323;
    padding: 0 0.5em
}

@media (min-width: 25rem) {
    h1 {
        font-size: 1.6rem;
    }
    .home_about_box h1 {
        top: 1.3rem;
    }
}

@media (min-width: 60rem) {
    h1 {
        font-size: 1.2rem;
    }

    .about.bg {
        background-image: url(https://i.imgur.com/aTF2hwR.jpg);
        padding: 5em;
    }

    .home_about_box {
    font-size: .8em;
    width: 25em;
    margin: 0;
}

    .home_about_box h1 {
        top: 1.5rem;
    }
}

/* portfolio
*/

.portfolio_home {
    margin: 1.8em 0 0;
    background-size: cover;
}

.portfolio_home h1 {
    color: #174FC1;
    font-size: 3em;
    margin: auto;
    padding: 0 0 .3em 0;
}

.port-item {
    margin: 0;
    position: relative;
}

.port-item img {
    display: block;
}

.port-desc {
    position: absolute;
    z-index: 100;
    bottom: 0em;
    left: 0em;
    right: 0em;
    color: #FFF;
    background: rgba(0,0,0,.75);
    padding-bottom: 1em;
    padding-top: 1em;
}

.port-desc p {
    margin: .5em;
    background-size: 100% 100%;
}

@media (min-width: 40rem) {
    .port-item {
        width: 50%;
        float: left;
    }
}

@media (min-width: 60rem) {
    .port-item {
        width: 33.3333334%;
        float: left;
        overflow: hidden
    }

    .port-desc {
        transform: translateY(150%);
    }

    .port-item:hover .port-desc {
        transform: translateY(0%)
    }
}

/* CTA
*/

.cta{
    background-color: #174fc1;
    padding: 0.1em;
}

.cta h1 {
    margin-top: 1em;
    color: #FFF
}

/* Footer */

footer {
    background: #232323;
    color: #FFF;
}

Answer 1

首先你需要最小化codepen就像这个你不需要里面的一切。

第一个问题:-对于第一个问题，请确保您的 z-index 大于与您重叠的元素。在您的情况下，它是 .port-desc，z-index 为 100，因此您需要超过 100。

.home_about_box {
  background-color: #232323;
  font-size: 0.8em;
  padding: 4em;
  outline: 2px solid #174fc1;
  outline-offset: -3em;
  color: #fff;
  z-index: 101;
}

第二个问题:-您需要删除左侧和右侧的填充，我想这就是您说它们不接触时的意思。

img {
  max-width: 100%;
  height: auto;
  padding: 1em 0.5em 0;
  background-size: cover;
}

第三个问题:-滚动条是因为宽度为100wh，你可以更新宽度为100%。

@media (min-height: 30rem) {
  .home-hero {
    width: 100%;
    height: 100vh;
  }
}