Landing Page Project horizontal scroll bar

HTML-CSS
1

I am working on landing page project. Following is my code

<header id="header">
        <img src="product-landing-page-logo.png" alt="product logo" id="header-img">
        <nav id="nav-bar">
            <a href="#features" class="nav-link">Features</a>
            <a href="#video" class="nav-link">HowItWorks</a>
            <a href="#pricing" class="nav-link">Pricing</a>
        </nav>
    </header>

    <main>
        <h2>Handcrafted, home-made masterpieces</h2>

        <form action="https://www.freecodecamp.com/email-submit" id="form">
            <input type="email" id="email" name="email" placeholder="Enter your email address" required><br><br>
            <input type="submit" value="GET STARTED" id="submit">
        </form> 

          <section id="features">
            <div>
                <h2>Premium Materials</h2>
                <p>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
                <br><br>
            </div>

            

            <div>
                <h2>Fast Shipping</h2>
                <p>We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are not satisfied.</p>
                <br><br>
            </div>


            <div>
                <h2>Quality Assurance</h2>
                <p>For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your instrument.</p>
                <br><br>
            </div>

          </section>

          <section>
            <iframe width="560" id="video" height="315" src="https://www.youtube-nocookie.com/embed/y8Yv4pnO7qc?si=6TmQlZHbZ_rJsacf&amp;controls=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
          </section>

          <section id="pricing">
            <div class="price-tag">
                <div class="price-category">
                    <h3 >TENOR TROMBONE</h3>
                </div>
                
                <p class="price">$600</p>
                
                <div>
                    <p>Lorem ipsum.</p>
                    <p>Lorem ipsum.</p>
                    <p>Lorem ipsum dolor.</p>
                    <p>Lorem ipsum.</p>
                </div>

                <button type="button">SELECT</button>
            </div>
            <div class="price-tag">
                <div class="price-category">
                    <h3 >BASS TROMBONE</h3>
                </div>
                
                <p class="price">$900</p>
                
                <div>
                    <p>Lorem ipsum.</p>
                    <p>Lorem ipsum.</p>
                    <p>Lorem ipsum dolor.</p>
                    <p>Lorem ipsum.</p>
                </div>

                <button type="button">SELECT</button>
            </div>
            <div class="price-tag">
                <div class="price-category">
                    <h3 >VALVE TROMBONE</h3>
                </div>
                
                <div>
                    <p class="price">$1200</p>
                </div>
                
                <div>
                    <p>Plays similar to a Trumpet</p>
                    <p>Great for Jazz Bands</p>
                    <p>Lorem ipsum dolor.</p>
                    <p>Lorem ipsum.</p>
                </div>
                

                <button type="button">SELECT</button>
            </div>
          </section>
    </main>

    <footer>

        <a href="#">Privacy</a>
        <a href="#">Terms</a>
        <a href="#">Contact</a>

        <p>Copyright 2016, Original Trombones</p>
    </footer>

* {
    box-sizing: border-box;
}

body {
    background-color: #eee;
    font-family: 'Lato', sans-serif;
    margin: 0;
    border: 2px solid black;
}


#header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 5rem;
    background-color: #eee;
    position: fixed;
    width: 100%;
}

#header-img {
    margin-right: auto;
    width: 19rem;
}

#nav-bar > a {
    font-size: 1rem;
    padding: 5rem;
    text-decoration: none;
    color: #000;
    cursor: default;
}

main {
    width: 80%;
    margin: auto;
    padding-top: 4rem;
    border: 2px solid black;
}



main > h2, #form {
    text-align: center;
}

#form input[type="email"] {
     padding: 0.3em 6em 0.3em 0.5em;
}

#form input[type="submit"] {
    background-color: gold;
    font-weight: 900;
    font-size: 1rem;
    border: none;
    padding: 0.2em 0.5em 0.2em 1em;
}

#form input[type="submit"]:hover {
    background-color: coral;
}

div > h2 {
	margin-bottom: 0px;
}

div > p {
	margin-top: 0px;
}

#features {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin-left: 28%;
    margin-top: 5%;
}

#video {
    margin-left: 30%;
    margin-top: 5%;
}

#pricing {
    display: flex;
    justify-content: center;
    margin-top: 3em;
    column-gap: 1.2em;
    border: 2px solid red;
}

.price-tag {
    background-color: #eee;
    border: 1px solid black;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 1 19rem;
    row-gap: 1em;
}

button {
    padding: 0.8em 1.1em;
    background-color:coral;
    border: none;
    font-size: 1em;
    margin-bottom: 0.6em;
}

button:hover {
    background-color: aqua;
    cursor: pointer;
}

.price-category {
    background-color: rgba(0,0,0, 0.1);
    width: 100%;
}

.price-category > h3 {
    text-align: center;
  }

.price {
    font-size: 1.5em;
    font-weight: 700;
}

.price-tag  p {
    text-align: center;
}

footer {
    background-color: rgba(0,0,0, 0.1);
    text-align: end;
    width: 950px;
    margin: 2em auto 0 auto;
    padding: 1em;
}

footer > a {
    color: #000;
    text-decoration: none;
    font-weight: 500;
    margin: 0.5em;
}

footer > p {
    margin-top: 0.2em;
    font-size: 0.9em;
}

@media screen and (max-width: 953px) {
    footer {
        width: auto;
    }

    #pricing {
        flex-direction: column;
        align-items: center;
    }

    .price-tag {
        width: 20em;
    }

    
}

Now, I am trying to work on responsive web design here. So, I put the media query at the bottom. Now, if I reduce the viewport width, at one point, horizontal scroll bar appears and footer element goes outside the body element’s border. As I reduce viewport width further, horizontal scroll bar disappears and I get the desired result where footer occupies 100% width. I do not really understand why this is happening. I tried putting box-sizing: border-box; at the very beginning but that did not help.
I tried this in 3 browsers (Edge, Chrome and Opera) but the behavior is same. Please guide.

2

can you copy your code into a codepen.io project area so we can play with it and look at the results live?

3

Ok here is code on codepen

My code for Project Landing Page

5

was this selector for a body element that you used to have? (I don’t see it anymore)

Edit: I added overflow: hidden to this body selector and that seems to work well.

6

Ok it seems to work. But what was the issue ? The width of footer is set to auto below certain viewport width, so footer should not overflow body element.

7

I suggest that you try to inspect the page with chrome dev tools. As you click through the elements, you can see their size. (you can also see the size of the viewport) and this will allow you to find the element that is too big (or sometimes more than one).

8

I did what you are suggesting. spent entire day doing that and checking widths of various elements using their box models in dev tools. But could not figure out the issue.