css - div 的背景不适合左侧并产生不需要的滚动

Question

大家好，我用这张图片解释了我的问题。

我用这段代码为div做背景

.intro .bg-img{
     position: absolute;
     background: green url('https://static.pexels.com/photos/7350/startup-photos.jpg');
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     width:100%;
     height:350px;
     z-index: -1;
     opacity: 0.5;
}

这是全部代码 https://codepen.io/haithamsha/pen/LeVZVr

Answer 1

查看您的代码，您的 CSS 将 1em 填充应用于包装类中的每个 div。

要解决此问题，您可以将 padding: 0 !important; 应用于您的介绍类。

.intro {
    grid-column: span 1;
    text-align: center;
    min-height: 350px;
    background-color: #fff;
    z-index: 1;
    position: relative;
    padding: 0 !important; /* Apply important here */
    margin: 0;
}

或者您需要从每个 div 中删除 1em 填充，并使您的填充更加精细。

.wrapper > div {
   /* background: #ddd; */
   padding: 1em; /*<-- Remove this*/
}

希望对你有帮助