NEWB ALERT 导航栏问题，其中以下部分涵盖了导航栏。还需要帮助学习形成部分限制

Question

Goodevening all.I 在实施我的第一个 bootstrap 导航栏时遇到了问题。我已经让它成功工作，但我的部分正下方与导航栏重叠（如果我使用 -1 的 z-index，我只能看到导航栏，但该部分中的按钮不起作用）。我曾尝试将 heigh/width 更改为 css，但仅限于我可以使该部分变得多小。

这是我遇到的问题：https://imgur.com/a/3CwLnK3

第一个问题：你可以看到英雄部分是如何进入下一个区域的。另外，我如何限制英雄部分左侧和右侧 padding/margin 的边距？我试图在 css 中进行调整，但它不让我这样做。

第二个问题：您可以看到服务部分中的 img 如何不调整自身大小以保持在框内（星号）

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <title>FullSite</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
    </head>

    <body>
<!--Start of Bootstrap code-->
    <nav class="navbar navbar-expand-sm navbar-dark bg-info">
        <a href="#" class="navbar-brand">Astronomics</a>
        <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarMenu">
        <!--Data-toggle is used by bootstrap js to listen to clicks and open/close automatically. the data target has to matchet collapse target-->
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarMenu">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a href="#" class="nav-link">Users</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">Products</a>
                </li>
            </ul>
        </div>
    </nav>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous"></script>
    <!--End of Bootstrap code-->

    <!-- Start Hero Section -->
    <main>
    <section id="hero">
        <div class="hero container">
            <div class="hero-text">
               <h1><span>Welcome</span><br> 
                <span>To J.P.A</span><br>
                <h1><span>Investments</span></h1>
                <a href="#" type="button" class="cta">DAO Portfolio</a>
        </div>
        <div class="hero-text2">
               <h1><span>Join</span><br> 
                <span>Our</span><br>
                <h1><span>Vision</span></h1>
                <a href="#" type="button" class="cta">DAO WhitePapers</a>
        </div> 
        </main>      
    </section>
    <!-- End Hero Section --> 
    <!--SERVICE SECTION-->
    <section id="services">
        <!--<div class="service container"></div>-->
         <div class="service-top">
             <h1 class="section-title"><span>$Astro</span>nomical Future</h1>
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
        <div class="service-bottom">
            <div class="service-item">
                <div class="icon"><img src="img/nebulas.jpg">
                    <h2>MetaVerse Professionals</h2>
                        <div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p></div>
        </div>
            </div>
            <div class="service-item">
                <div class="icon"><img src="img/nebulas.jpg">
                    <h2>MetaVerse Professionals</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
            </div>
            <div class="service-item">
                <div class="icon"><img src="img/nebulas.jpg">
                    <h2>MetaVerse Professionals</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
            </div>
            <div class="service-item">
                <div class="icon"><img src="img/nebulas.jpg">
                    <h2>MetaVerse Professionals</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
            </div>
                </div>

    </section>
</body>
</html>```


    @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:wght@200&display=swap');
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-weight: normal;
    font-size: 21px;
    line-height: 28px;
  }
  
  a {
    text-decoration: none;
  }
  html{
    line-height: 1.15;
    text-size-adjust: 100%;
  }
  body {
    background: whitesmoke;
    margin: 0;  
    display: block;
    margin: 8px;
  }
  
nav {
  display: block;
}
  .container {
    width: min(80%, 1200px);
    margin: auto;
    min-height: 102vh;
    text-align: center;
    position: relative;
    top: -49px;
    height: 76%;
  }
  #mainl{
    width: 200px;
    height: 300px;
  }
  
  .hero {
    background: linear-gradient(95.78deg, rgb(69, 70, 110) 28.23%, rgb(21, 22, 74) 52.12%, rgb(61, 21, 66) 100%);
    z-index: 1;
    border: 2px solid #800000;
    display: grid;
    height: 50px; 
    width: 50%
  }
  
  .hero-text {
    color: #800000;
    display: inline-block;
    line-height: 1;
    margin: 5em auto;
    z-index: 1;
  }
  .hero-text2 {
    color: #800000;
    position: relative;
    top: 5px;
    z-index: 1;
  }
  span {
    display: inline-block;
    margin-right: auto;
  
    position: relative;
    font-size: clamp(1.5rem, 5vw + 10px, 3rem);
    animation: reveal_anim 1s forwards;
  }
  #hero span::before {
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    z-index: -1;
  }
  
  a {
    text-decoration: none;
  }
  
  .cta {
    display: inline-block;
    margin-right: auto;
    margin-top: 1em;
    padding: 0.2em 0.5em;
    font-size: clamp(1rem, 5vw, 2rem);
    border: 2px solid blue;
    animation: reveal_anim 1s forwards;
    animation-delay: 500ms;
    opacity: 0;
  
  }
/* End Hero Section */
/* Servicesss Section */
#services{
    flex-direction: column;
    text-align: center;
    font-size: 15px;
    max-width: 1500px;
    margin: 0 auto;
    padding-top: 100px 0;
    border-top: 5px;
    margin-top: 5px;
    /*this flex overrised the container style*/
}   
#services .section-title{
    font-size: 4rem;
    font-weight: 300;
    /*light weight*/
    color: #6f2a70;
    margin-bottom: 1px;
    text-transform: uppercase;
    letter-spacing: .2rem;
    text-align: center;
}
#services .section-title span{
    color:#800000;
    font-size: 3rem;
}
#services .section-title{
  color: black;
  font-size: 3rem;
}
#services .service-top p {
    font-size: 1.4rem;
    margin-top: 5px;
    line-height: 2.5rem;
    font-weight: 300px;
    letter-spacing: .05rem;
}
#services .service-bottom {
    display:flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    
}
#services .service-item {
    flex-basis: 80%;
    display: fleq;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    padding: 20px;
    border-radius: 10px;
    background-image: url(./img/stars.jpg);
    background-size: cover;
    margin: 10px 5%;
}
#services .service-item::after{
  content:'';
  position:absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: black;
  opacity: .1;
  z-index: -1;
}
.icon img{
  position:relative;
  left: 425px;
}
#services .service-item p {
    color: #800000;
    font-size: 20px;
}
#services .service-item h2 {
  color: white;
  position: relative;
  font-size: 30px;
  top: -60px;
}
#services .service .container {
    margin: 10px;
}
/* End of Servicesss Section */
/*keyframes*/
@keyframes reveal_anim{
    0% {
        transform: translateX(50%);
    }
    50% {
        opacity:0.5;
    }
    100% {
        transform: translateX(0%);
        opacity: 1;
    }
}

Answer 1

代码没问题，但考虑更改以下样式

删除 .icon img 的 left:425px 这将解决星星图像对齐问题
删除 .container 的 top:-49px 这将解决菜单重叠问题
为 .hero

height: 50px

这是更新后的代码

    @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:wght@200&display=swap');
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-weight: normal;
    font-size: 21px;
    line-height: 28px;
  }
  
  a {
    text-decoration: none;
  }
  html{
    line-height: 1.15;
    text-size-adjust: 100%;
  }
  body {
    background: whitesmoke;
    margin: 0;  
    display: block;
    margin: 8px;
  }
  
nav {
  display: block;
}
  .container {
    width: min(80%, 1200px);
    margin: auto;
    min-height: 102vh;
    text-align: center;
    position: relative;
    /*top: -49px;*/
    height: 76%;
  }
  #mainl{
    width: 200px;
    height: 300px;
  }
  
  .hero {
    background: linear-gradient(95.78deg, rgb(69, 70, 110) 28.23%, rgb(21, 22, 74) 52.12%, rgb(61, 21, 66) 100%);
    z-index: 1;
    border: 2px solid #800000;
    display: grid;
    /*height: 50px; */
    width: 50%
  }
  
  .hero-text {
    color: #800000;
    display: inline-block;
    line-height: 1;
    margin: 5em auto;
    z-index: 1;
  }
  .hero-text2 {
    color: #800000;
    position: relative;
    top: 5px;
    z-index: 1;
  }
  span {
    display: inline-block;
    margin-right: auto;
  
    position: relative;
    font-size: clamp(1.5rem, 5vw + 10px, 3rem);
    animation: reveal_anim 1s forwards;
  }
  #hero span::before {
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    z-index: -1;
  }
  
  a {
    text-decoration: none;
  }
  
  .cta {
    display: inline-block;
    margin-right: auto;
    margin-top: 1em;
    padding: 0.2em 0.5em;
    font-size: clamp(1rem, 5vw, 2rem);
    border: 2px solid blue;
    animation: reveal_anim 1s forwards;
    animation-delay: 500ms;
    opacity: 0;
  
  }
/* End Hero Section */
/* Servicesss Section */
#services{
    flex-direction: column;
    text-align: center;
    font-size: 15px;
    max-width: 1500px;
    margin: 0 auto;
    padding-top: 100px 0;
    border-top: 5px;
    margin-top: 5px;
    /*this flex overrised the container style*/
}   
#services .section-title{
    font-size: 4rem;
    font-weight: 300;
    /*light weight*/
    color: #6f2a70;
    margin-bottom: 1px;
    text-transform: uppercase;
    letter-spacing: .2rem;
    text-align: center;
}
#services .section-title span{
    color:#800000;
    font-size: 3rem;
}
#services .section-title{
  color: black;
  font-size: 3rem;
}
#services .service-top p {
    font-size: 1.4rem;
    margin-top: 5px;
    line-height: 2.5rem;
    font-weight: 300px;
    letter-spacing: .05rem;
}
#services .service-bottom {
    display:flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    
}
#services .service-item {
    flex-basis: 80%;
    display: fleq;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    padding: 20px;
    border-radius: 10px;
    background-image: url(https://www.nasa.gov/sites/default/files/thumbnails/image/archives_m8_0.jpg);
    background-size: cover;
    margin: 10px 5%;
}
#services .service-item::after{
  content:'';
  position:absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: black;
  opacity: .1;
  z-index: -1;
}
.icon img{
  position:relative;
  /*left: 425px;*/
}
#services .service-item p {
    color: #800000;
    font-size: 20px;
}
#services .service-item h2 {
  color: white;
  position: relative;
  font-size: 30px;
  top: -60px;
}
#services .service .container {
    margin: 10px;
}
/* End of Servicesss Section */
/*keyframes*/
@keyframes reveal_anim{
    0% {
        transform: translateX(50%);
    }
    50% {
        opacity:0.5;
    }
    100% {
        transform: translateX(0%);
        opacity: 1;
    }
}

.icon img {max-height: 200px;}

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <title>FullSite</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
    </head>

    <body>
<!--Start of Bootstrap code-->
    <nav class="navbar navbar-expand-sm navbar-dark bg-info">
        <a href="#" class="navbar-brand">Astronomics</a>
        <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarMenu">
        <!--Data-toggle is used by bootstrap js to listen to clicks and open/close automatically. the data target has to matchet collapse target-->
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarMenu">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a href="#" class="nav-link">Users</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">Products</a>
                </li>
            </ul>
        </div>
    </nav>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous"></script>
    <!--End of Bootstrap code-->

    <!-- Start Hero Section -->
    <main>
    <section id="hero">
        <div class="hero container">
            <div class="hero-text">
               <h1><span>Welcome</span><br/> 
                <span>To J.P.A</span><br/>
                <h1><span>Investments</span></h1>
                <a href="#" type="button" class="cta">DAO Portfolio</a>
        </div>
        <div class="hero-text2">
               <h1><span>Join</span><br/> 
                <span>Our</span><br/>
                <h1><span>Vision</span></h1>
                <a href="#" type="button" class="cta">DAO WhitePapers</a>
        </div> 
        </main>      
    </section>
    <!-- End Hero Section --> 
    <!--SERVICE SECTION-->
    <section id="services">
        <!--<div class="service container"></div>-->
         <div class="service-top">
             <h1 class="section-title"><span>$Astro</span>nomical Future</h1>
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
        <div class="service-bottom">
            <div class="service-item">
                <div class="icon"><img src="https://www.nasa.gov/sites/default/files/thumbnails/image/archives_helix.jpg">
                    <h2>MetaVerse Professionals</h2>
                        <div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p></div>
        </div>
            </div>
            <div class="service-item">
                <div class="icon"><img src="https://www.nasa.gov/sites/default/files/thumbnails/image/archives_helix.jpg">
                    <h2>MetaVerse Professionals</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
            </div>
            <div class="service-item">
                <div class="icon"><img src="https://www.nasa.gov/sites/default/files/thumbnails/image/archives_helix.jpg">
                    <h2>MetaVerse Professionals</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
            </div>
            <div class="service-item">
                <div class="icon"><img src="https://www.nasa.gov/sites/default/files/thumbnails/image/archives_helix.jpg">
                    <h2>MetaVerse Professionals</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
            </div>
                </div>

    </section>
    
</body>
</html>

注意： 由于某些原因，此代码段中的资源未正确加载。可以看看这个pen参考

Answer 2

在你的代码中 .container 有 top: -49 px 只是评论它然后 .hero z-index:1 评论它。您的重叠问题将解决。您的设计很简单，但是通过使用 html 和 css 进行编码会使您变得复杂。有一种简单的方法可以解决它。如果您需要我的帮助，请联系我。

NEWB ALERT 导航栏问题，其中以下部分涵盖了导航栏。还需要帮助学习形成部分限制

NEWB ALERT Nav Bar issue in which the section below is covering the navbar. Also need help learning to forms section limitst

html

css

jquery

navbar

bootstrap-4