Stop Generating Unwanted Scrolling in CSS - css

Question

I got little code from a website its about animate.css. The problem I am facing is that when page load it generate too many scroll. If I use bounceInRight or bounceInLeft if generate left or right scroll and when I use bounceInUp or bounceInDown it generate vertical scroll and when I minimize screen and then maximize that scroll automatically getting removed. Here is my CSS and HTML
<div id="logo">
<span id="a">
<span class="dd animated bounceInUp">A</span>
</span>
<span id="leading">
<span class="da animated bounceInUp">Leading</span>
</span>
<div>
<span id="mep">
<span class="zz animated bounceInUp">MEP</span>
</span>
<span id="integrated">
<span class="zn animated bounceInUp">INTEGRATED</span>
</span>
</div>
<div>
<span id="solution">
<span class="dr animated bounceInUp">Solutions</span>
</span>
<span id="provider">
<span class="de animated bounceInUp">Provider</span>
</span>
</div>
</div>
and CSS
<style>
#logo { color:#000; font-family: 'Montserrat', sans-serif; text-align:center; margin-top:150px; height:570px; }
#logo span { display:inline-block; }
#logo #a {margin-right: 10px; font-size:40px; }
#logo #leading {font-size:40px; }
#logo #mep {margin-right: 20px; font-size:80px;}
#logo #integrated { font-size:80px; }
#logo #solution {margin-right: 20px; font-size:50px;}
#logo #provider {font-size:50px;}
#media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2) {
#logo { color:#000; font-family: 'Montserrat', sans-serif; text-align:center; margin-top:150px;}
#logo span { display:inline-block; }
#logo #a {margin-right: 20px; font-size:15px; }
#logo #leading {font-size:15px; }
#logo #mep {font-size:30px;}
#logo #integrated { font-size:30px; }
#logo #solution {margin-right: 20px; font-size:20px;}
#logo #provider {font-size:20px;}
/* logo */
.dd { animation-delay:0.2s; -moz-animation-delay:0.2s; -webkit-animation-delay:0.2s; }
.da { animation-delay:0.8s; -moz-animation-delay:0.8s; -webkit-animation-delay:0.8s; }
.dn { animation-delay:0.6s; -moz-animation-delay:0.6s; -webkit-animation-delay:0.6s; }
.dg { animation-delay:1s; -moz-animation-delay:1s; -webkit-animation-delay:1s; }
.de { animation-delay:0.4s; -moz-animation-delay:0.4s; -webkit-animation-delay:0.4s; }
.dr { animation-delay:1.2s; -moz-animation-delay:1.2s; -webkit-animation-delay:1.2s; }
.zz { animation-delay:1.4s; -moz-animation-delay:1.4s; -webkit-animation-delay:1.4s; }
.zo { animation-delay:0.4s; -moz-animation-delay:0.4s; -webkit-animation-delay:0.4s; }
.zn { animation-delay:0.6s; -moz-animation-delay:0.6s; -webkit-animation-delay:0.6s; }
.ze { animation-delay:0.5s; -moz-animation-delay:0.5s; -webkit-animation-delay:0.5s; }
}
demo http://abskillz.com/bkg-new/ch.html

Answer 1

The thing that brings a lot of height is the 570px that you are giving to #logo. Do you really need it? The text blocks inside logo give their parent a natural height if you don't do anything like position: absolute.
Your problem should be fixed by adding overflow-y: hidden; to the #logo.
Example: http://codepen.io/brav0/pen/ENrKXR?editors=1100