按钮在开发工具上正确对齐，但在实际移动设备上不正确

Question

所以我遇到了一个问题，我的按钮在 Chrome 开发工具和浏览器上正确对齐。

即使我尝试了多种屏幕尺寸，它也能正常工作。

正确对齐

但是，它在实际移动设备上没有正确对齐。 我已经尝试过多种 iPhone 屏幕尺寸，似乎所有这些屏幕都出现了问题。

不正确

我不完全确定是什么导致了这种情况。

我认为这是因为标题上的 flex 实现，但找不到解决方法。

CSS

 body { width: 100%; padding: 0; margin: 0; max-width: 100%; font-family: Arial, Helvetica, sans-serif; box-sizing: border-box; } Html { Font-size: 62.5%; } /* END RESET */ .container { width: 100%; padding: 0; } h1, h2, h3, h4, h5, h6 { font-size: 4rem; } .header { display: flex; flex-flow: column nowrap; } .navbar.navbar-inverse.navbar-static-top { justify-content: flex-end; background-color: black; padding: 1.5rem 0; } .nav.navbar-nav>li { display: flex; justify-content: center; font-size: 2rem; align-items: center; padding: 1rem .5rem 0 0; } .nav.navbar-nav li a { color: white; padding-right: 2rem; } .hamburger { display: flex; flex-flow: column nowrap; font-size: 2.5rem; line-height: .75rem; padding-right: 2rem; } .navbar-toggle.collapsed { background-color: black; border: none; } #non-mobile { display: flex; justify-content: flex-end; background-color: rgba(0, 0, 0, 0.897); } #non-mobile a { color: white; padding: 2rem 1.5rem; font-size: 2rem; margin-right: 2.5rem; font-family: Arial, Helvetica, sans-serif; } #non-mobile a:hover { color: lightcoral; text-decoration: none; } .video { min-width: 100%; min-height: 100%; } .header-text-container { display: flex; position: absolute; color: white; font-size: 5rem; padding: 30% 0 0 2%; text-transform: uppercase; font-weight: bold; } #header-button { display: flex; position: absolute; margin-top: 20%; } .header { display: flex; background: black; } .past-events{ background-color:black; } .past-events h3 { color: white; display: flex; justify-content: left; align-items: center; font-weight: 600; } .past-events .events { display: grid; grid-template-columns: repeat(auto-fill, minmax(35rem, 1fr)); grid-gap: 1rem; justify-content: center; text-align: center; padding: 0 4% 4%; width: inherit; } .events img { width: 100%; opacity: .7; } .photo { position: relative; text-align: center; color: white; font-size: 35px; font-style: oblique; } .centered { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .overlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; opacity: 0; transition: .5s ease; background-color: lightgray; } .photo:hover .overlay { opacity: 1; } .text { color: black; font-size: 20px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; } .section-titles { display: flex; justify-content: left; align-items: left; text-transform: uppercase; font-family: Gotham, Helvetica, sans-serif; padding: 30px 30px; margin-left: 30px; !important margin-top: 5%; font-weight: bold; } .instagram-feed h2 { text-decoration: none; font-weight: 600; } .instagram-feed h2 a:hover { color: blue; } .instagram-embed { padding: 0 4% 4%; !important } .ig-link { text-decoration: none; color: black; } .footer { display: grid; grid-template-areas: "footer footer footer"; align-items: center; background: #000; color: white; padding: 1.5% 0; } .footer-1 { display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; text-align: center; padding: 0; } .footer-1 a { color: white; text-decoration: none; font-size: 1.5rem; text-align: center; } .footer-1 a:hover { text-decoration: underline; } .footer-2 { display: flex; justify-content: center; align-items: center; flex-flow: column nowrap; } .footer-2 h3 { font-size: 3rem; } #mailchimp { padding: 20px 15px; display: inline-block; } #mc-embedded-subscribe-form { display: inline-block; } #mailchimp input { border: medium none; display: inline-block; color: gray; font-family: Arial, Helvetica, sans-serif; font-size: 1.5rem; margin-bottom: 10px; padding: 8px 10px; width: 100%; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } #mailchimp input.email { background: #fff } #mailchimp input.name { background: #fff} #mailchimp input[type="submit"] { background: blue; color: #fff; cursor: pointer; font-size: 15px; width: 50%; padding: 8px 0; } #mailchimp input[type="submit"]:hover { color: #FFFFF} .footer-3 { display: flex; justify-content: center; align-items: center; } .footer-3 a { color: white; text-decoration: none; font-size: 2.5rem; text-align: center; padding: 0 1rem; } .footer-3 a:hover { text-decoration: underline; } /* MEDIA QUERIES */ @media (max-width: 1200px) { .container { max-width: 100%; } } @media (min-width: 1201px) { .container { max-width: 100%; } } @media (max-width: 799px) { h2, h3 { font-size: 3rem; } #non-mobile { display: none; } .header-text-container { display: flex; position: absolute; color: white; font-size: 3rem; padding: 30% 0 0 2%; text-transform: uppercase; font-weight: bold; } .section-titles { margin: 0; /* padding: 1rem;*/ padding: 5% 3% 0; } a.ig-link { font-size: 3rem; } .past-events h3 { color: white; display: flex; justify-content: left; align-items: center; font-weight: 600; } .past-events .events { display: grid; grid-template-columns: repeat(auto-fill, minmax(35rem, 1fr)); grid-gap: 1rem; justify-content: center; text-align: center; padding: 6%; width: inherit; } .section-titles { padding: 5% 3% 0; } .instagram-embed { padding: 6% 2% 2%;!important } .footer { display: flex; flex-flow: column nowrap; } .footer-2 { text-align: center; width: 60%; padding: 1rem; margin: auto; } .footer-1 { display: none; } } @media (min-width: 800px) { #mobile { display: none; } }

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Leverage Events</title> <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"> <script src="https://kit.fontawesome.com/2c97d4a124.js" crossorigin="anonymous"></script> <link rel="stylesheet" href="style.css" /> </head> <body class="container"> <!-- HEADER --> <section class="header"> <div class="container"> <nav class="navbar navbar-expand-lg navbar-dark" id="non-mobile"> <a href="#home">Home</a> <a href="#past-events">Past Events</a> <a href="#contact">Contact</a> <a href="#buytickets" class="btn btn-light" style="color: black; height: 2rem; display: flex; justify-content: center; align-items: center;">Buy Tickets</a> </nav> <nav class="navbar navbar-inverse navbar-static-top" role="navigation" id="mobile"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <div class="hamburger"> <span class="sr-only">Toggle navigation</span> <i class="fas fa-bars" style="color: white;"></i> </div> </button> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li><a href="#home">Home</a></li> <li><a href="#past-events">Past Events</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#buytickets">Buy Tickets</a></li> </ul> </div> </nav> <div class="header"> <div class="video"> <video autoplay loop muted src="/Content/IMG_2407.mov" style="width: 100%;"></video> </div> <div class="header-text-container"> <div class="header-text">Simp City - 12/27</div><br> <a id="header-button" class="btn btn-primary btn-lg" href="https://google.com" target="_blank" role="button">Buy Tickets</a> </div> </div> </section> <!-- PAST EVENTS --> <section class="past-events"> <div class="section-titles"> <h3>Past Events</h3> </div> <div class="events"> <div class="photo"><a href="https://www.facebook.com/Leverage.EventsLV/photos/?tab=album&amp;album_id=590174911548524" target="_blank"><img src="Content/dec22.jpg" alt="December 22 Simp City"></a> <div class="centered">SIMP CITY DEC '18</div><div class="overlay"><div class="text">View Photos</div></div> </div> <div class="photo"><a href="https://www.facebook.com/Leverage.EventsLV/photos/?tab=album&amp;album_id=590174911548524" target="_blank"><img src="Content/dec22.jpg" href="https://www.facebook.com/pg/Leverage.EventsLV/photos/?tab=album&amp;album_id=590174911548524&amp;ref=page_internal" alt="February 8 Simp City"></a> <div class="centered">SIMP CITY FEB '19</div><div class="overlay"><div class="text">View Photos</div></div> </div> <div class="photo"><a href="https://www.facebook.com/Leverage.EventsLV/photos/?tab=album&amp;album_id=590174911548524" target="_blank"><img src="Content/dec22.jpg" href="https://www.facebook.com/pg/Leverage.EventsLV/photos/?tab=album&amp;album_id=590174911548524&amp;ref=page_internal" alt="April 20 Simp City"></a> <div class="centered">SIMP CITY APR '19</div><div class="overlay"><div class="text">View Photos</div></div> </div> <div class="photo"><a href="https://www.facebook.com/Leverage.EventsLV/photos/?tab=album&amp;album_id=590174911548524" target="_blank"><img src="Content/dec22.jpg" href="https://www.facebook.com/pg/Leverage.EventsLV/photos/?tab=album&amp;album_id=590174911548524&amp;ref=page_internal" alt="May 24 Simp City"></a> <div class="centered">SIMP CITY MAY '19</div><div class="overlay"><div class="text">View Photos</div></div> </div> <div class="photo"><a href="https://www.facebook.com/Leverage.EventsLV/photos/?tab=album&amp;album_id=590174911548524" target="_blank"><img src="Content/dec22.jpg" href="https://www.facebook.com/pg/Leverage.EventsLV/photos/?tab=album&amp;album_id=590174911548524&amp;ref=page_internal" alt="June 21 Simp City"></a> <div class="centered">SIMP CITY JUN '19</div><div class="overlay"><div class="text">View Photos</div></div> </div> <div class="photo"><a href="https://www.facebook.com/Leverage.EventsLV/photos/?tab=album&amp;album_id=590174911548524" target="_blank"><img src="Content/dec22.jpg" href="https://www.facebook.com/pg/Leverage.EventsLV/photos/?tab=album&amp;album_id=590174911548524&amp;ref=page_internal" alt="September 27 Simp City"></a> <div class="centered">SIMP CITY SEP '19</div><div class="overlay"><div class="text">View Photos</div></div> </div> </div> </section> <!-- INSTAGRAM FEED --> <section class="instagram-feed"> <div class="section-titles"> <h2> <a class="ig-link" href="https://www.instagram.com/leverage.events/">@Leverage.Events</a> </h2> </div> <div class="instagram-embed"> <script src="https://apps.elfsight.com/p/platform.js" defer></script> <div class="elfsight-app-439976ed-093d-4046-a0d1-64376fd75fc4"></div> </div> </section> <!-- FOOTER --> <footer> <div class="footer"> <div class="footer-1"> <a href="#home">Home</a> <a href="#ticket">Buy Tickets</a> <a href="#pastevents">Past Events</a> <a href="#contact">Contact</a> </div> <div class="footer-2"> <h3>Subscribe to our newsletter</h3> <!-- Begin Mailchimp Signup Form --> <!-- Begin MailChimp Signup Form --> <div id="mailchimp"> <form action="https://gmail.us4.list-manage.com/subscribe/post?u=f70087d431b3e345fddb98552&amp;id=aa4efdcadf" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank"> <input type="email" size="30" value="Enter your email" name="EMAIL" class="required email" id="mce-EMAIL" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"> <div id="mce-responses" class="clear"> <div class="response" id="mce-error-response" style="display:none"></div> <div class="response" id="mce-success-response" style="display:none"></div> </div> <div class="clear"> <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"> </div> </form> </div> <!--End mc_embed_signup--> </div> <div class="footer-3"> <a href="https://www.instagram.com/leverage.events/" target="_blank"><i class="fab fa-instagram" aria-hidden="true"></i></a> <a href="https://business.facebook.com/Leverage.EventsLV/" target="_blank"><i class="fab fa-facebook" aria-hidden="true"></i></a> </div> </div> </footer> <!-- BOOTSTRAP --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"> </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"> </script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"> </script> </body> </html>

Answer 1

它格式错误 - 可能不是问题，但这需要纠正以消除这不是原因。

找到这个...

    </section>
    <!-- PAST EVENTS -->

并在它成为...之前添加缺少的结束div

        </div>
    </section>
    <!-- PAST EVENTS -->