Hi there, I am encountering an issue where setting the width and height of the viewport causes scrollbars to appear when text is added inside <h1></h1>. This behavior is puzzling me as I have not experienced it before in my previous HTML and CSS designs. I was experimenting with FlexBoxGrid for responsive design testing when this problem arose. Interestingly, deleting the text inside <h1></h1> makes the scrollbars disappear. The same issue occurs with commented-out <h3></h3> elements as well as <p></p> tags.
<body>
<!-- HEADER SECTION -->
<header id="sec_home">
<div class="row center-xs center-sm center-md center-lg middle-xs middle-sm middle-md middle-lg">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<h1>sdfsdf</h1>
<!--<h3>
The beast.
</h3>
<h3>
The best.
</h3>-->
</div>
</div>
</header>
<!-- BIOGRAPHY SECTION -->
<section id="sec_bio">
</section>
* {
padding: 0;
margin: 0;
}
@font-face {
font-family: 'BlkLite'; /*a name to be used later*/
src: url('/fonts/BlkLite.ttf'); /*URL to font*/
}
h1 {
font-family: 'BlkLite';
font-size: 8em;
color: rgb(206, 206, 206);
background-color: blueviolet;
}
#sec_home {
background-image: url("/bg/14582.jpg");
background-color: black;
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
width: 100vw;
}