我的主要内容受到页面上某些内容的影响，无法正确居中

Question

按照非常好的基础教程，我的内容（页眉和页脚之间的文本）不会居中。

我已经尝试遵循许多关于响应式图像框的教程（即连续 3 个，当调整到移动设备时，向下滚动时它应该是 1 乘 1），但我惨遭失败。到现在为止一切都很顺利，我感觉有更大的事情影响了我的整个页面，我相信这对很多人来说很简单，但我很傻。

提前感谢任何可以提供帮助的人，这让我很痛苦。

这是我的 HTML（我为整个站点使用 Dreamweaver 模板，但这不是模板文件，只是从模板创建的 HTML）。

<html lang="en" dir="ltr"><!-- InstanceBegin template="/Templates/Template.dwt" codeOutsideHTMLIsLocked="false" -->

<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css" />
<script src="https://kit.fontawesome.com/0e803ef49c.js" crossorigin="anonymous"></script>
<style>@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- InstanceBeginEditable name="doctitle" -->
        <title>Holiday Rentals</title>
    <!-- InstanceEndEditable -->

    <!-- InstanceBeginEditable name="head" -->
    <!-- InstanceEndEditable -->
    
</head>

<body>

    
    <!-- Navigation Bar -->
    <nav>
        <input type="checkbox" id="check">
        <label for="check" class="checkbtn">
            <i class="fa fa-bars"></i>
        </label>
        <label class="logo">MALLORCA<span>NOW</span></label>
        <ul>
            <li><a class="active"href="#">Home</a></li>
            <li><a href="#">Holiday Rentals</a></li>
            <li><a href="#">For Sale</a></li>
        </ul>
    </nav>
    <!-- End Navigation Bar -->
    
    
    <!-- Main Content -->
    <!-- InstanceBeginEditable name="main-content" -->  
    <div class="main-content">
        <div class="box-area">
            <div class="single-box">
                <div class="img-area"></div>
                <div class="img-text">
                    <span class="header-text">Azalea</span>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque scelerisque ut quam ac iaculis. Mauris.</p>
                </div>   
            </div>
            <div class="single-box">
                <div class="img-area"></div>
                <div class="img-text">
                    <span class="header-text">Canguila</span>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque scelerisque ut quam ac iaculis. Mauris.</p>
                </div>   
            </div>
            <div class="single-box">
                <div class="img-area"></div>
                <div class="img-text">
                    <span class="header-text">Iris</span>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque scelerisque ut quam ac iaculis. Mauris.</p>
                </div>   
            </div>
        </div>
    
    </div>
        

    


    
    <!-- InstanceEndEditable -->
    <!-- End Main Content -->
    
    <!-- Footer -->
    <footer>
        <div class="footer-main-content">
            <div class="left box">
                <h2>About Us</h2>
                <div class="footer-content">
                    <p>Mallorca Now, established in 2010, specialise in Property Rentals, Sales and Management in the North East area of Mallorca, covering mainly Cala Ratjada, Cala Bona, Cala Millor and Cala Anguila (inc Porto Cristo Novo). </p>
                    <div class="social">
                        <a href="#"><span class="fab fa-facebook-f"></span></a>
                        <a href="#"><span class="fab fa-twitter"></span></a>
                        <a href="#"><span class="fab fa-instagram"></span></a>
                        <a href="#"><span class="fab fa-youtube"></span></a>
                    </div>
                </div>
            </div>
            
            <div class="center box">
                <h2>Address</h2>
                <div class="footer-content">
                    <div class="place">
                        <span class="fas fa-map-marker-alt"></span>
                        <span class="text">Cala Bona, Mallorca</span>
                    </div>
                    <div class="phone">
                        <span class="fas fa-phone-alt"></span>
                        <span class="text">+34-676841886</span>
                    </div>
                    <div class="email">
                        <span class="fas fa-envelope"></span>
                        <span class="text">office@mallorca-now.com</span>
                    </div>
                </div>
            </div>
            
            <div class="right box">
                <h2>Contact Us</h2>
                <div class="footer-content">
                 <form action="#">
                    <div class="email">
                        <div class="text">Email *</div>
                        <input type="email" required>
                    </div>
                    <div class="msg">
                        <div class="text">Message *</div>
                        <textarea rows="2" cols="25" required></textarea> 
                    </div>
                    <div class="btn">
                        <button type="submit">Send</button>
                    </div>
                 </form>
                </div>
            </div>
        </div>
        <div class="bottom">
            <center>
                <span class="credit">Est. 2012 -<a href="#"> Mallorca-Now</a></span>
                <span class="far fa-copyright"></span><span> - All Rights Reserved</span>
            </center>
        
        </div>
    </footer>
    
    <!-- End Footer -->
   
</body>
<!-- InstanceEnd --></html>

还有我的 CSS，最后一个样式是预期的“中心”，但正如我所说，我在向网站的中间部分添加内容时遇到了其他问题。

/* CSS Document */
/* font-family: 'Montserrat', sans-serif; */

*{
    padding:0;
    margin:0;
    text-decoration:none;
    list-style:none;
    box-sizing:border-box;
    font-family: 'Montserrat', sans-serif;
}



/* Navbar */
nav{
    background-color:#101010;
    height:80px;
    width:100%;
    position:sticky;
    top:0;
}

label.logo{
    color:white;
    font-size:35px;
    font-weight:100;
    line-height:80px;
    padding:0 100px;
}

label.logo span{
    font-weight:900;
}

nav ul{
    float:right;
    margin-right:20px;
}

nav ul li{
    display:inline-block;
    line-height:80px;
    margin:0 5px;
}
    
nav ul li a{
    color:white;
    font-size:17px;
    padding:7px 13px;   
}

nav ul li a.active,nav ul li a:hover{
    background:#6DD5FA;
    transition:0.9s;
    border-radius:4px;
}

.checkbtn{
    font-size:30px;
    color:white;
    float:right;
    line-height:80px;
    margin-right:40px;
    cursor:pointer;
    display:none;
}

#check{
    display:none;
}

@media (max-width: 952px){
    label.logo{
        font-size:30px;
        padding-left:50px;
    }
    nav ul li a{
        font-size:16px;
    }
}
@media (max-width:858px){
    .checkbtn{
        display:block;
    }
    ul{
        position:fixed;
        width:100%;
        height:100vh;
         background-color: #6DD5FA; /* For browsers that do not support gradients */
        background-image: linear-gradient(to bottom             right, #2980B9, #6DD5FA, #FFFFFF);
        top:80px;
        left:-100%;
        text-align:center;
        transition:all .9s;
    }
    nav ul li{
        display:block;
        margin:50px;
        line-height:30px;
        
    }
    nav ul li a{
        font-size:20px;
    }
    a:hover,a.active{
        background:none;
        color:#0082e6;
    }
    
    #check:checked ~ ul{
        left:0;
    }
}



/* Main Content */

.main-content{
    
    min-height:;
    background-color: #6DD5FA; /* For browsers that do not support gradients */
    background-image: linear-gradient(to bottom right, #2980B9, #6DD5FA, #FFFFFF);      
}

.cards{
    max-width:1300px;
    margin:0 auto;
    text-align:center;
    padding:30px;
}

.services{
    display:flex;
    align-items:center;
}

.cardscontent{
    display:flex;
    flex-wrap:wrap;
    flex:1;
    margin:20px;
    padding:20px;
    border:2px solid black;
    border-radius:4px;
    transition: all 0.9s ease;
}

.cardscontent .fab{
    font-size:70px;
    margin:16px 0;
}

.cardscontent .fas{
    font-size:70px;
    margin:16px 0;
}

.cardscontent > *{
    flex: 1 1 100%;
}

.cardscontent:hover{
    color:white;
}

.cardscontent:hover a{
    border-color:white;
    background:white;
    color:black;
}

.c-content1:hover{
    border-color:#BCED91;
    background:#BCED91;
}

.c-content2:hover{
    border-color:#FFC30B;
    background:#FFC30B;
}

.c-content3:hover{
    border-color:#D70040;
    background:#D70040;
}
    

.cardscontent h2{
    font-size:30px;
    margin:16px 0;
    letter-spacing:1px;
}

.cardscontent p{
    font-size:17px;
}

.cardscontent a{
    margin:22px;
    background:black;
    color:white;
    text-decoration:none;
    border:1px solid black;
    padding:15px 0;
    border-radius:25px;
    transition:.9s ease;
}

.cardscontent a:hover{
    border-radius:4px;
}

@media (max-width:900px){
    .services{
        display:flex;
        flex-direction:column;
    }
}






/* Footer */

footer{
    position:relative;
    bottom:0;
    width:100%;
    background-color:#101010;
    color:white;
}

.footer-main-content{
    display:flex;   
}

.footer-main-content .box{
    flex-basis:50%;
    padding:10px 20px;
}

.box h2{
    font-size:1.125rem;
    font-weight:600;
    text-transform:uppercase;
}

.box .footer-content{
    margin:20px 0 0 0;
    position:relative;
}

.box .footer-content:before{
    position:absolute;
    content:'';
    top:-10px;
    height:2px;
    width:100%;
    background:#1a1a1a;
}

.box .footer-content:after{
    position:absolute;
    content:'';
    height:2px;
    width:15%;
    background:#6DD5FA;
    top:-10px;
}

.left .footer-content{
    text-align:justify;
}

.left .footer-content .social{
    margin:20px 0 0 0;
}

.left .footer-content .social a{
    padding: 0 2px;
}

.left .footer-content .social a span{
    height:40px;
    width:40px;
    background:#1a1a1a;
    line-height:40px;
    text-align:center;
    font-size:18px;
    border-radius:5px;
    color:white;
}

.left .footer-content .social a span:hover{
    background:#6DD5FA;
    transition:0.9s;
    
}

.center .footer-content .fas{
    font-size:1.4375rem;
    background:#1a1a1a;
    height:45px;
    width:45px;
    line-height:45px;
    text-align:center;
    border-radius:50%;
    transition:0.9s;
    cursor:pointer;
}

.center .footer-content .fas:hover{
    background:#6DD5FA;
}

.center .footer-content .text{
    font-size:1.0625rem;
    font-weight:500;
    padding-left:10px;
}

.center .footer-content .phone{
    margin:10px 0;
}

.right form .text{
    font-size:1.0625rem;
    margin-bottom:2px;
    color:#656565;
}

.right form .msg{
    margin-top:10px;
}

.right form input, .right form textarea{
    width:100%;
    font-size:1.0625rem;
    background:#151515;
    padding-left:10px;
    border:1px solid #222222;
    color:white;
}

.right form input:focus, 
.right form textarea:focus{
    outline-color:#3498db;
}

.right form input{
    height:32px;
}

.right form .btn{
    margin-top:10px;
}

.right form .btn button{
    height:40px;
    width:100%;
    border:none;
    outline:none;
    background: #6DD5FA;
    font-size:1.0625rem;
    font-weight:500;
    cursor:pointer;
    transition:0.3s;
    color:white;
}

.right form .btn button:hover{
    background:#000;
}

.bottom center{
    padding:5px;
    font-size:0.9375rem;
    background:#151515;
}

.bottom center span{
    color:#656565;
}

.bottom center span a{
    color:white;
}

@media screen and (max-width:900px){
    footer{
        position:relative;
        bottom:0px;
    }
    
    .footer-main-content{
        flex-wrap:wrap;
        flex-direction:column;
    }
    
    .footer-main-content .box{
        margin:5px 0;
    }
}


.box-area{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
} ```

The .box-area should center the content, as I have tried it out in a blank HTML page and it does. I am truly lost. Thanks to anyone that can help, and If I havent provided enough information I am sorry, tell me what you need and I will.

Mark Monaghan

Answer 1

您似乎需要将 .box-area 的宽度增加 100% 才能使其居中。

    .box-area{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    /*Added width to the area and it centered*/
     width: 100%;
}

这是我用来玩的codepen： https://codepen.io/josiemedel/pen/XWpMbpw

Answer 2

基本上，发生这种情况的原因是您使用浮动定位导航栏的元素。使用浮动时更令人困惑的事情之一是它们如何影响包含它们的元素（它们的“父”元素）。要解决这个问题，请将溢出属性设置为隐藏在导航中。

示例：

nav{
  background-color:#101010;
  height:80px;
  width:100%;
  position:sticky;
  top:0;
  overflow:hidden;
}

您可以通过以下 link 获得有关如何使用此属性的更多信息：All About Floats | CSS Tricks

我的主要内容受到页面上某些内容的影响，无法正确居中

My main content is being affected by something on the page, won't center properly

html

css

text

center