javascript - 元素无法在更大的屏幕上正确显示

Question

我创建的着陆页在大屏幕上有很多对齐问题，尽管有很多 {margin: auto;} 功能。不确定哪里出了问题。

其他问题:1) 展示横幅左侧的小空白2)页面底部，页脚下方的空白3) 中间的黄线应与标题一致(Featured Speaker)4) 黄色按钮 CTA 没有很好地包裹

对于所列任何内容的任何帮助，我们将不胜感激。

谢谢!

 1)

<!-- Showcase Section-->
<div id="showcase">
 <header>
  <nav class="cf">
    <ul class="cf">
      <li class="hide-on-small">
        <a href="https://www.centro.net/">
        <img src="https://www2.centro.net/l/75412/2019-01- 
 15/4kzjqb/75412/179423/Centro_Webinar_logo.png" alt="Centro Webinars"> 
 </a>
      </li>
    </ul>
    <a href="#" id='openup'>Centro Webinars</a>
  </nav>
</header>

/* Showcase */
#showcase {
margin: 0;
padding: 0;
padding-bottom: 20px;
background: url('https://www2.centro.net/l/75412/2019-01- 
15/4kzjql/75412/179431/herotallerwider.png') no-repeat center/cover;
width: 100%;
position: relative;
overflow-y: hidden;
}

#showcase .container {
margin-top: 13vh;
margin-left: 0vw;
margin-right: 43vw;
}

#showcase h1 {
margin-left: 7vw;
font-size: 1.5rem;
margin-bottom: -0.1em;
color: #1fadde;
}

#showcase h3 {
margin-left: 7vw;
font-size: 0.9rem;
margin-bottom: -1.3em;
color: #3a3d40;
}

 #showcase h2 {
 margin-left: 7vw;
 font-size: 1.2rem;
 margin-bottom: -0.5em;
 color: #1fadde;
 }

 #showcase p {
 margin-left: 7vw;
 font-size: 14px;
 margin-bottom: -0.5em;
 color: #3a3d40;
 width: 70%;
 }


2)

/* Footer */
footer .footersection {
background: #333;
padding: 1rem;
color: #FFFFFF;
text-align: center;
margin: 0 auto;
overflow: hidden;
}
#footer img {
margin-top: 0.5vh;
height: 20px;
width: 20px;
display: inline;
margin-left: auto;
margin-right: 10px;
}
#footer .smicons {
margin-left: auto;
margin-right: auto;
text-align: center;
}


<!-- Footer Section -->
<footer>  
<section id="footer" class="footersection">
<div class="container">
<div class="smicons">
<a href="https://www.facebook.com/centro.llc">
<img src="https://www2.centro.net/l/75412/2019-01- 
16/4kzrcg/75412/179517/facebook.png" alt="Centro Facebook">
</a>
<a href="https://twitter.com/centro">
<img src="https://www2.centro.net/l/75412/2019-01- 
16/4kzrcb/75412/179519/twitter.png" alt="Centro Twitter">
</a>
<a href="https://www.linkedin.com/company/centro">
<img src="https://www2.centro.net/l/75412/2019-01- 
16/4kzrcd/75412/179515/linkedin.png" alt="Centro LinkedIn">
</a>
<a href="https://www.youtube.com/user/centrollc">
<img src="https://www2.centro.net/l/75412/2019-01- 
16/4kzrcj/75412/179521/youtube.png" alt="Centro YouTube">
</a>
</div>
</div>
</footer>


3)

<!-- Featured Speakers Section -->
<section id="featuredspeakers" class="featuredspeakerssection">
<div class="container">
<div class="featspeak">
<h3 pardot-region="speakerORspeakers" pardot-region- 
type="simple">Featured Speaker
</h3>
</div>  
    <div>
    <hr>
    </div>
<img src="https://www2.centro.net/l/75412/2019-01- 
15/4kzjqj/75412/179433/ryanmancheecirclegoldring.png" alt="Ryan Manchee">
<h4 pardot-region="speaker name" pardot-region-type="simple">[SPEAKER 
 NAME]
</h4>
<h5 pardot-region="speaker title" pardot-region-type="simple">Speaker 
Title
</h5>
<p class="lead" pardot-region="speaker bio1" pardot-region- 
type="simple">Speaker Bio 1</p>
<p class="lead" pardot-region="speaker bio2" pardot-region- 
type="simple">Speaker Bio 2</p>
</div>

/* Feature Speaker Section */
.featuredspeakerssection {
padding: 1rem 0;
}

#featuredspeakers .container {
margin: 0;
margin-top: 1vh;
margin-left: 0vw;
}

#featuredspeakers h3 {
font-size: 1.5rem;
color: #1fadde;
text-align: left;
margin-left: 7vw;
margin-top: 7vh;
}
#featuredspeakers hr { 
display: inline-block;
margin: -50px 50px 75px 20px;
overflow: hidden;
border-style: inset;
border-width: 0.5px;
border-color: #ffbf3d;
width: 80%;
margin-left: 24vw;
margin-right: auto;
margin-bottom: 3vh;
position: relative;
}



4)

/* Buttons */
.button {
background-color: #FFBF3D;
border: none;
color: #3a3d40;
padding: 10px 25px;
text-align: center;
text-decoration: none;
display: block;
width: 8%;
font-size: 14px;
margin-left: auto;
margin-right: auto;
margin-top: -2vh;
border-radius: 5px;
}

<!-- Banner Section -->
<section id="banner" class="bannersection">
<div class="container">
<h3 pardot-region="banner title" pardot-region-type="simple">Catch Up 
With Your Industry</h3>
<p class="lead" pardot-region="banner blurb" pardot-region- 
type="simple">Level up and review our most popular past webinars.</p> 
</div>
<div pardot-region="banner CTA" pardot-region-type="simple" 
href="https://www.centro.net/webinar" class="button">Take Me There
</div>
</section>

Answer 1

1) 您的展示横幅图片左侧为白色，因此显示正确。

2) 您在打开和关闭 section 和 div 标签时遇到问题

3) 只是玩弄你的利润率。由于演讲者照片的尺寸固定，目前的解决方案总是会在不同尺寸的屏幕上给出不同的结果。我会考虑为您的黄色 hr 的定位找到不同的解决方案

4) 将此 div 更改为 anchor ，因为您需要它像按钮一样工作。

/* Showcase */

#showcase {
  margin: 0;
  padding: 0;
  padding-bottom: 20px;
  background: url('https://www2.centro.net/l/75412/2019-01-15/4kzjql/75412/179431/herotallerwider.png') no-repeat center/cover;
  width: 100%;
  position: relative;
  overflow-y: hidden;
}

#showcase .container {
  margin-top: 13vh;
  margin-left: 0vw;
  margin-right: 43vw;
}

#showcase h1 {
  margin-left: 7vw;
  font-size: 1.5rem;
  margin-bottom: -0.1em;
  color: #1fadde;
}

#showcase h3 {
  margin-left: 7vw;
  font-size: 0.9rem;
  margin-bottom: -1.3em;
  color: #3a3d40;
}

#showcase h2 {
  margin-left: 7vw;
  font-size: 1.2rem;
  margin-bottom: -0.5em;
  color: #1fadde;
}

#showcase p {
  margin-left: 7vw;
  font-size: 14px;
  margin-bottom: -0.5em;
  color: #3a3d40;
  width: 70%;
}


/* Footer */

footer .footersection {
  background: #333;
  padding: 1rem;
  color: #FFFFFF;
  text-align: center;
  margin: 0 auto;
  overflow: hidden;
}

#footer img {
  margin-top: 0.5vh;
  height: 20px;
  width: 20px;
  display: inline;
  margin-left: auto;
  margin-right: 10px;
}

#footer .smicons {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}


/* Feature Speaker Section */

.featuredspeakerssection {
  padding: 1rem 0;
}

#featuredspeakers .container {
  margin: 0;
  margin-top: 1vh;
  margin-left: 0vw;
}

#featuredspeakers h3 {
  font-size: 1.5rem;
  color: #1fadde;
  text-align: left;
  margin-left: 7vw;
  margin-top: 7vh;
}

#featuredspeakers hr {
  display: inline-block;
  overflow: hidden;
  border-style: inset;
  border-width: 0.5px;
  border-color: #ffbf3d;
  margin-left: 40%;
  width: 60%;
  position: relative;
  top: -40px;
}


/* Buttons */

.button {
  background-color: #FFBF3D;
  border: none;
  color: #3a3d40;
  padding: 10px 25px;
  text-align: center;
  text-decoration: none;
  display: block;
  width: 8%;
  font-size: 14px;
  margin-left: auto;
  margin-right: auto;
  margin-top: -2vh;
  border-radius: 5px;
}

1)

<!-- Showcase Section-->
<div id="showcase">
  <header>
    <nav class="cf">
      <ul class="cf">
        <li class="hide-on-small">
          <a href="https://www.centro.net/"><img src="https://www2.centro.net/l/75412/2019-01-15/4kzjqb/75412/179423/Centro_Webinar_logo.png" alt="Centro Webinars"></a>
        </li>
      </ul>
      <a href="#" id="openup">Centro Webinars</a>
    </nav>
  </header>
</div>
2)

<!-- Footer Section -->
<footer>
  <section id="footer" class="footersection">
    <div class="container">
      <div class="smicons">
        <a href="https://www.facebook.com/centro.llc"><img src="https://www2.centro.net/l/75412/2019-01-16/4kzrcg/75412/179517/facebook.png" alt="Centro Facebook"></a>
        <a href="https://twitter.com/centro"><img src="https://www2.centro.net/l/75412/2019-01-16/4kzrcb/75412/179519/twitter.png" alt="Centro Twitter">
        </a>
        <a href="https://www.linkedin.com/company/centro"><img src="https://www2.centro.net/l/75412/2019-01-16/4kzrcd/75412/179515/linkedin.png" alt="Centro LinkedIn"></a>
        <a href="https://www.youtube.com/user/centrollc"><img src="https://www2.centro.net/l/75412/2019-01-16/4kzrcj/75412/179521/youtube.png" alt="Centro YouTube"></a>
      </div>
    </div>
  </section>
</footer>
3)

<!-- Featured Speakers Section -->
<section id="featuredspeakers" class="featuredspeakerssection">
  <div class="container">
    <div class="featspeak">
      <h3 pardot-region="speakerORspeakers" pardot-region-type="simple">Featured Speaker </h3>
    </div>
  </div>
  <hr>
  <div>
    <img src="https://www2.centro.net/l/75412/2019-01-15/4kzjqj/75412/179433/ryanmancheecirclegoldring.png" alt="Ryan Manchee">
    <h4 pardot-region="speaker name" pardot-region-type="simple">[SPEAKER NAME] </h4>
    <h5 pardot-region="speaker title" pardot-region-type="simple">Speaker Title </h5>
    <p class="lead" pardot-region="speaker bio1" pardot-region-type="simple">
      Speaker Bio 1
    </p>
    <p class="lead" pardot-region="speaker bio2" pardot-region-type="simple">
      Speaker Bio 2
    </p>
  </div>
</section>
4)

<!-- Banner Section -->
<section id="banner" class="bannersection">
  <div class="container">
    <h3 pardot-region="banner title" pardot-region-type="simple">Catch Up With Your Industry</h3>
    <p class="lead" pardot-region="banner blurb" pardot-region-type="simple">
      Level up and review our most popular past webinars.
    </p>
  </div>
  <a pardot-region="banner CTA" pardot-region-type="simple" href="https://www.centro.net/webinar" target="_blank" class="button">
        Take Me There
    </a>
</section>