I am working on Project Landing Page of freecodecamp site. Following is my code
* {
box-sizing: border-box;
margin: 0;
}
body {
background-color: #eee;
font-family: 'Lato', sans-serif;
border: 1px solid black;
}
main {
width: 80%;
margin: auto;
padding-top: 4rem;
}
#features {
display: flex;
flex-direction: column;
justify-content: flex-start;
margin-left: 28%;
margin-top: 5%;
}
#video {
margin-left: 30%;
margin-top: 5%;
}
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: 952px) {
footer {
width: auto;
}
}
<main>
<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&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>
</main>
<footer>
<a href="#">Privacy</a>
<a href="#">Terms</a>
<a href="#">Contact</a>
<p>Copyright 2016, Original Trombones</p>
</footer>
Now, I have to make this site responsive. So using dev tools, I change the viewport size. If I look at the footer
element, I get following parameters in Opera browser when I set viewport size to 956px
viewport = 956px
footer width = 950px
body border = 1 + 1 = 2px
body width = 941.6px
footer margin-right = -10px
And I also get a horizontal scroll bar at this viewport width. Now, for the same viewport width, I get following parameters in Chrome browser
viewport = 956px
footer width = 950px
body border = 1 + 1 = 2px
body width = 939.2px
footer margin-right = -12.4px
And again a horizontal scroll bar. Now, my question is how do these numbers add up ? If there is a horizontal scroll bar, viewport width should be less than footer width since footer is overflowing body border. I am confused.