html - 在一定的页面宽度后，我的两个 DIV 从页面流出

Question

我这里有很多代码，请原谅我的长度。

我的 .about 容器有问题。我的 .about-experience 和 .about-projects div 正在从页面流出，即使我在之后指定了 100% width页面的 width 为 500 像素或更小。任何帮助都会很棒。同样，这与我的 .about-experience 和 .about-project div 相关。我的 .main-profile div 正常工作。

我已经尝试了几种方法，包括一个相当极端的测试，试图强制调整大小:margin: 0 !important;宽度:100%!重要；最大宽度:300 像素!重要；最小宽度:100px； !重要

这是达到该尺寸时发生的情况的图片:https://gyazo.com/1eddfbf68e8c01113b17aaa3fa2c05b9

我不确定我只是遇到了一些本地浏览器问题还是什么，但我在 Chrome 和 Firefox 中遇到了同样的问题。任何帮助，将不胜感激。我已经被这个问题困扰了几个小时。

/* CSS */

/* Main body styles */

* {
    box-sizing: border-box;
    box-sizing: padding-box;
}

body {
    overflow-x: hidden;
    margin: auto;
    font-family: Arial, sans-serif;
    font-size: 1em;
    background-color: #fff;
}

body::-webkit-scrollbar {
    width: 15px;
}

body::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px #fff; 
    background-color: rgb(56, 56, 56);
}

body::-webkit-scrollbar-thumb {
    background-color: #79CDCD70; 
    border-radius: 10px;
}

.btn {
    padding: 1%;
    text-align: center;
    width: 10%;
    background-color: #fff;
    color: rgb(56, 56, 56);
    font-size: 1.5em;
    border: 2px solid rgb(56, 56, 56);
    transition: border .5s ease;
}

.btn:hover {
    border: 2px solid #79CDCD;
    transition: border .5s ease;
    cursor: pointer;
}

/* Main header Styles */

header {
    background: linear-gradient(to bottom, #79CDCD, white, transparent 110%),
                url(../img/alpine.jpg);
    box-shadow: 5px 10px 20px #888888,
                -55px 0 20px;
    background-position: center;
    background-size: cover;
    padding-top: 4%;
    width: 100%;
    height: 600px;
    text-align: center;
}

header h1 {
    margin-top: 75px !important;
}

header h1,
header h2 {
    margin: auto;
    width: 75%;
    text-align: center;
    color: #79CDCD;
}

header h1 {
    font-size: 6rem;
}

header h2 {
    letter-spacing: 2px;
    font-size: 2rem;
    padding-bottom: 1%;
    border-bottom: 2px solid #fff;
}

/* Main navigation styles */

nav {
    text-align: center;
    font-size: 1.5rem;
    font-weight: 600;
    background-color: #ffffff50;
    width: 50%;
    margin: auto;
    padding-top: .5%;
    padding-bottom: .5%;
    border: 2px solid #fff;
}

nav ul {
    margin: 0;
    padding-left: 0;
    padding: .75% 0;
}

nav li {
    display: inline;
    padding-left: 10%;
    padding-right: 10%;
}

nav a {
    text-decoration: none;
    color: #fff;
    transition: opacity .5s ease;
}

nav a:hover {
    transition: opacity .5s ease;
    opacity: .5;
}

/* Home main content styles */

.main-profile {
    box-shadow: 5px 10px 20px #888888,
                -5px 0 20px #888888;
    margin: 5% auto 5% auto;
    width: 45%;
    padding: 2%;
    text-align: center;
    color: #fff;
    border-top: 11px solid #79CDCD;
    background-color: rgb(56, 56, 56);
    border-top-right-radius: 5%;
}

.main-profile img {
    margin: auto;
    width: 50%;
    padding-bottom: 15px;
    border-radius: 50%;
    filter: grayscale(100%);
}

.main-profile h2 {
    font-size: 2rem;
    background-color: #79CDCD;
    width: 100%;
    margin: auto;
}

.main-profile p {
    font-size: 1.5rem;
}

.main-profile .skills {
    font-size: 1rem;
    margin-top: -3%;
}

/* Info boxes in main-profile section */

.info {
    margin: auto auto 5% auto;
    text-align: center;
    color: #fff;
    font-size: 1.5rem;
}

.info_1,
.info_2,
.info_3 {
    box-sizing: border-box;
    background-color: #79CDCD;
    width: 250px;
    height: 250px;
    line-height: 6.5rem;
    display: inline-block;
    margin: 0 2.5% 0 2.5%;
    border-bottom-left-radius: 15px;
    border-top-right-radius: 15px;
    border-top: 5px solid rgb(56, 56, 56);
    transition: ease .8s;
}

.info a {
    text-decoration: none;
    font-family: Arial, sans-serif;
    font-size: 4rem;
}

.info_1 p,
.info_2 p,
.info_3 p{
    color: #fff;
}

.info_1:hover,
.info_2:hover,
.info_3:hover {
    background-color: #79CDCD50;
    transform: scaleX(1.1);
    line-height: 7.5rem;
    border-bottom-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 15px;
    border-top-left-radius: 15px;
    border-top: 5px solid #79CDCD;
    transition: ease .8s;
}

.info_1:hover p,
.info_2:hover p,
.info_3:hover p {
    color: rgb(56, 56, 56);
}

/* About Section Styles */

.about {
    text-align: center;
    color: #fff;
    width: 100%;
    margin: auto;
}

.about h2 {
    font-size: 3rem;
    width: 75%;
    margin: auto auto 2.5% auto;
    border-top: 2px solid #79CDCD;
    color: #79CDCD;
}

.about-experience {
    float: left;
    box-shadow: 5px 10px 20px #888888,
                -5px 0 20px #888888;
    margin: 5% 2.5% 5% 5%;
    padding-bottom: 2.5%;
    width: 40%;
    height: 400px;
    min-width: 500px;
    max-width: 700px;
    background-color: rgb(56, 56, 56);
    border-top: 11px solid #79CDCD;
    border-top-right-radius: 5%;
}

.about-experience h3 {
    font-size: 1.5rem;
    text-decoration: underline;
}

.about-experience p {
    line-height: 1.5;
    padding-left: 2.5%;
    padding-right: 2.5%;
}

.about-projects {
    float: right;
    box-shadow: 5px 10px 20px #888888,
                -5px 0 20px #888888;
    margin: 5% 5% 5% 2.5%;
    width: 40%;
    height: 400px;
    max-width: 700px;
    min-width: 500px;
    overflow-y: auto;
    background-color: rgb(56, 56, 56);
    border-top: 11px solid #79CDCD;
    border-top-right-radius: 5%;
}


.about-projects h3 {
    font-size: 1.5rem;
    text-decoration: underline;
}

.about-projects p {
    line-height: 1.5;
    padding-left: 2.5%;
    padding-right: 2.5%;
}

.about-projects img {
    width: 65%;
    transition: opacity .5s ease;
}

.about-projects figure:after {
    content: '';
    width: 0px;
    height: 1px;
    display: block;
    background: #fff;
    transition: .4s;
    margin: auto;
}

.about-projects figure:hover:after {
    text-decoration: underline;
    width: 50%;
}

.about-projects::-webkit-scrollbar {
    width: 5px;
    border-radius: 25%;
}

.about-projects::-webkit-scrollbar-thumb {
    background-color: #79CDCD50; 
    border-radius: 100%;
}

.group {
    content: '';
    display: table;
    clear: both;
}

/* Contact Section Styles */

.contact {
    width: 100%;
    text-align: center;
    color: #79CDCD;
}

.contact h2 {
    font-size: 3rem;
    width: 75%;
    margin: auto auto 2.5% auto;
    border-top: 2px solid #79CDCD;
    color: #79CDCD;
}

.name-field,
.phone-field,
.email-field {
    width: 30%;
    height: 50px;
    margin-bottom: 2.5%;
    font-size: 2rem;
    color: #79CDCD;
    border: 2px solid rgb(56, 56, 56);
    transition: border .5s ease;
    padding-left: 1%;
    padding-right: 1%;
}

.contact textarea {
    font-family: Arial, sans-serif;
    font-size: 1.5rem;
    width: 30%;
    margin-bottom: 1.5%;
    color: #79CDCD;
    border: 2px solid rgb(56, 56, 56);
    transition: border .5s ease;
}

.contact textarea:hover,
.name-field:hover,
.phone-field:hover,
.email-field:hover {
    border: 2px solid #79CDCD;
    transition: border .5s ease;
}


.contact .btn {
    margin-bottom: 2%;
}

/* Home footer styles */

.main-footer {
    background-color: rgb(56, 56, 56);
    border-top: 5px solid #79CDCD;
    position: relative;
    text-align: center;
    padding-bottom: .1%;
    bottom: 0px;
    width: 100%;
}

.main-footer {
    font-size: small;
    color: white;
}

/* Media Queries */

@media (max-width: 1300px) {
    
    nav {
        width: 95%;
    }
    
    .info_1,
    .info_2,
    .info_3 {
        margin-bottom: 5%;
    }
    
    .about-experience,
    .about-projects {
        float: none;
        margin: auto auto 2.5% auto;
        max-width: 100%;
    }
    
    .name-field,
    .phone-field,
    .email-field,
    .contact textarea {
        min-width: 75%;
    }
    
    .contact .btn {
        min-width: 30%;
    }
}

@media (max-width:550px) { 
    
    nav {
        width: 50%;
        border: 3px solid #fff;
        background-color: #ffffff50;
    }
    
    nav li {
        display: block;
        padding: 2.5%;
    }
    
    nav a {
        color: #fff;
    }
    
    header {
        margin-bottom: 10%;
        height: 500px;
    }
    
    header h1 {
        font-size: 3rem;
    }
    
    header h2 {
        font-size: 1.5rem;
    }
    
    .main-profile {
        width: 100%;
        border-radius: 0;
    }
    
    .about-experience,
    .about-projects {
      border-radius: 0;
      width: 100%;
      margin-bottom: 5%;
    }
    
    .contact input,
    .contact textarea {
        width: 90%;
    }
    
    .contact .btn {
        width: 40%;
        margin-bottom: 10%;
    }
}

<!DOCTYPE html>
<html>
    <heading>
        <title>My Name</title>
        <link rel="stylesheet" href="styles/styles.css" type="text/css" />
        <meta name="viewport" content="width=device-width">
    </heading>
    <body>
        <header>
            <nav>
            <ul>
                <li><a id="nav1" href="#">Home</a></li>
                <li><a id="nav2" href="#about">About</a></li>
                <li><a id="nav3" href="#contact">Contact Me</a></li>
            </ul>
            </nav>
            <h1>Ben Youngblood</h1>
            <h2>Developer Profile</h2>
        </header>
        <main class="main-content">
            
            <div class="main-profile">
                <img src="img/ben_photo.jpg" alt="Picture of Ben">
                <h2>Ben</h2>
                <p>Web Developer</p>
                <p class="skills">HTML and CSS</p>
            </div>
            
            <div class="info">
                <a href="#">
                    <div class="info_1">
                        <p>App 1</p>
                    </div>
                </a>
                
                <a href="#">
                    <div class="info_2">
                        <p>App 2</p>
                    </div>
                </a>
                
                <a href="#">
                    <div class="info_3">
                        <p>App 3</p>
                    </div>
                </a>
            </div>

            <section>           
                <div class="about group">
                    <h2 id="about">About</h2>
                
                    <div class="about-experience">
                        <h3>My Experience</h3>
                        <p>I have experience in HTML and CSS languages. I have worked on one freelance project, worked with a digital agency as an intern web developer, and taken a web development course at the university I graduated from. I am also actively learning additional front-end technologies such as javascript on Team Treehouse. I have a passion for development, design, and being creative. I am striving to become more skilled and competent in front-end and eventually back-end development.</p>
                    </div>

                    <div class="about-projects">
                        <h3>My Projects</h3>
                        <p>The projects I have worked on consist of D3 Custom Countertops and this portfolio website. More information on those projects as well as links to them are below:</p>
                        <figure>
                            <a href="https://d3countertops.com" target="_blank"><img src="img/d3.png" alt="D3 Custom Countertops Website Image"></a>
                            <figcaption>
                                D3 Custom Countertops
                            </figcaption>
                        </figure>
                        <figure>
                            <a href="#"><img src="img/portfolio_site.PNG" alt="Ben Youngblood's Portfolio Website Image"></a>
                            <figcaption>
                                Ben Youngblood's Portfolio
                            </figcaption>
                        </figure>
                    </div>
                </div>
                
                <div class="contact">
                    <h2 id="contact">Contact</h2>
                    <form>
                        <input class="name-field" type="text" name="name" placeholder="Name">
                        <br>
                        <input class="phone-field" type="tel" name="phone" placeholder="Phone Number">
                        <br>
                        <input class="email-field" type="email" name="email" placeholder="Email Address">
                        <br>
                        <textarea rows="6" placeholder="Message"></textarea>
<!--                        <input class="text-field" type="text" name="message" placeholder="Message">-->
                        <br>
                        <input class="btn" type="submit" name="submit">
                    </form>
                </div>
            </section>
            
        </main>
        <footer class="main-footer">
            <p>&copy; Ben Youngblood, 2018</p>
        </footer>
<!--        <script src="js/app1.js"></script>-->
    </body>
</html>

Answer 1

在 @media (max-width:550px) 中的以下 CSS 规则中添加 min-width: none 以覆盖您在 general 中设置的 500px min-width强制这些元素宽度至少为 500 像素的 CSS 规则。

.about-experience,
.about-projects {
  border-radius: 0;
  width: 100%;
  min-width: none;
  margin-bottom: 5%;
}