how to make the design fully responsive - html

Question

The page open with scroll. I want to make the page appear fully responsive without any scroll bar. I tried to set the height to 100% with no luck.
html {
height: 100%;
width: 100%;
}
body{
width:100%;
hight:100%;
margin: 0;
padding:0;
}
.main{
background-image: url("http://www.ghadaalsamman.com/new/images/bg.gif");
background-repeat: no-repeat;
background-position: center center;
margin: 0;
padding-top: 30vw;
background-size: 100%;
}
.marquee {
display: block;
position: relative;
width: 51vw;
margin: auto;
}
marquee{
width: 100%;
margin: auto;
display: block;
}
#btn1 {
background: url("http://www.ghadaalsamman.com/new/images/enter.gif") no-repeat scroll center center ;
display: block;
height: 53px;
margin: 0 auto;
position: relative;
width: 50%;
background-size: 100%;
margin-top: 33%;
margin-bottom:1%;
}
.button {
padding: 5px;
}
.container {
display: block;
height: 100%;
margin: 0 auto;
max-width: 960px;
position: relative;
}
#media screen and (max-width:500px) {
#btn1{
background-size: 100% auto;
}
}
<div class="main">
<div class="container">
<div class="marquee">
<marquee scrollamount="3" direction="right" dir="ltr">
<h3 align="center" style="color:#804000;font-size:large;margin-top:0px;"><strong>
<img height="auto" width="200%" src="http://www.ghadaalsamman.com/new/images/image21.png">
</strong></h3>
</marquee>
</div>
<a class="button" id="btn1" href="http://ghadaalsamman.com/new/site.html"></a>
</div>
</div>

Answer 1

This is the problem
body {
width: 100%;
hight: 100%; <----- 'hight' make it 'height'
margin: 0;
padding: 0;
}
Replace with this
body {
width:100%;
height:100%;
margin: 0;
padding:0;
}

Answer 2

the ratio of your image will make it difficult i believe.
Since you started using vw units, maybe it's an hint to use vh units and max-width too.
Because of your image, too much like a square, the container needs too be a bit smaller to stay in sight. Because of , vw units, i would propose to use display:fle to easily center you container :
DEMO of my idea
CSS updated :
html {
height: 100%;
width: 100%;
}
body {
width:100%;
height:100%;/* UPDATED*/
margin: 0;
padding:0;
display:flex;/* UPDATED*/
}
.main {
background-image: url("http://www.ghadaalsamman.com/new/images/bg.gif");
background-repeat: no-repeat;
background-position: center center;
margin: 0;
padding-top: 15vh;/* UPDATED*/
background-size: 100%;
width:100vh;/* UPDATED*/
margin:auto;/* UPDATED*/
max-width:100vw;/* UPDATED*/
overflow:hidden;/* UPDATED hide marquee*/
}
.container {
display: block;
height: 100%;/* useless when parent has no height given */
margin: 0 auto;
position: relative;
}