The contents of my page are limited to two section elements. Both sections have a fixed size of 1280px in width and 800px in height. However, I noticed an issue when resizing the browser window; at a window width of 1281px, a horizontal scrollbar appears even though it should only happen below 1280px. The body element's reported width is 1264px, whereas the Dev Tool shows a window width of 1281px.
When I reduce the height of both section elements to less than the current window height, e.g., 300px, the scroll bar disappears, and the body width now matches the window at 1281px.
I've applied a CSS reset on this page as well. What could be causing this discrepancy, and how can it be resolved?
section#sec1{
background: orange;
}
section#sec2{
background: pink;
}
section{
display: block;
margin:0px auto;
width:1280px;
height:800px;
}
<section id="sec1">Some content</section>
<section id="sec2">Other content</section>
If you want jsfiddle: https://jsfiddle.net/L991shcp/
and the reset:
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}