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

Question

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

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

Correct Alignment

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

Incorrect

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

我认为这是因为标头上的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 -->