响应式网页具有最大宽度的怪异故障

Question

I have my webpage resize itself using "@media screen" and it works perfectly. It's setup to if the page reaches a certain width, it'll shrink the content to fit the page. However, there's this weird glitch that happens with my "hr" and "main p" At roughly 800px the hr and p both extend past its container, I don't want that to happen. Here's the link( https://jsfiddle.net/3oezsrj6/1/ ) and here's my code. To see what I'm talking about, drag the width of the page and make it smaller and watch the content resize, but then at a certain point, on the right the content will spill out the container.

main{
    width: 960px;
    min-width: 320px;
    background-color: white;
    margin: auto;
    border-style: solid;
    border-width: 0 3px;
}
footer{
    width: 960px;
    margin: auto;
    border: 3px solid black;
    background-color: #333;
}
hr{
    border: 0;
    border-top: 3px solid black;
    width: 700px;
    margin: auto;
}
main p{
    font-size: 15pt;
    width: 700px;
    text-align: justify;
    text-indent: 50px;
    margin: auto;
}
@media screen and (max-width: 959px){
    main{
        width: 95%;
    }
    footer{
        width: 95%;
    }
}
@media screen and (max-width: 699px){
    hr{
        width: 90%;
    }
    main p{
        width: 90%;
    }
}

<main>
    <h1>Welcome</h1>
    <hr>
    <p>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
    </p>
</main>
<footer>
    <p>Yeet</p>
</footer>

Answer 1

Your container is actually 700px wide with 15px margin on either side and 2x 3px wide borders. This makes the width closer to 736px and your media query needs to reflect that size and not the width of the container.

@media screen and (max-width: 737px){ }

Answer 2

It is because of fixed width you have given for your p and hr. Here is the updated fiddle: https://jsfiddle.net/3oezsrj6/5/

The changes I made is :

hr{
    border: 0;
    border-top: 3px solid black;
    width: 90%;
    margin: auto;
}
main p{
    font-size: 15pt;
    width: 90%;
    text-align: justify;
    text-indent: 50px;
    margin: auto;
}

You can change the width as per your requirements in percentage not in pixels as that will fix its width and hence not be responsive.

Answer 3

Update below CSS and you're done...

hr{
    max-width: 700px;
    width: 100%;
}
main p{
    width: 100%;
    max-width: 700px;
}

 *{ margin: 0; padding; 0; text-align: center; } body{ background-color: gray; } main{ width: 960px; min-width: 320px; background-color: white; margin: auto; border-style: solid; border-width: 0 3px; } footer{ width: 960px; margin: auto; border: 3px solid black; background-color: #333; } hr{ border: 0; border-top: 3px solid black; max-width: 700px; width: 100%; margin: auto; } main p{ font-size: 15pt; width: 100%; max-width: 700px; text-align: justify; text-indent: 50px; margin: auto; } @media screen and (max-width: 959px){ main{ width: 95%; } footer{ width: 95%; } } @media screen and (max-width: 699px){ hr{ width: 90%; } main p{ width: 90%; } } 

 <main> <h1>Welcome</h1> <hr> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries </p> </main> <footer> <p>Yeet</p> </footer>