I have started creating a 'web portal', as I would call it for an elementary school that children can more easily access all of their web applications on a Chromebook. I have it looking exactly how I like it, but for some reason there is this large area to the right of the document where it can scroll to.
You can see what I mean by viewing the page here: http://www.byelich.org/acps/test/index.html
How do I get rid of this, I am fairly new at CSS.
Thank you,
J
Here is the HTML of the document:
CODE
<!DOCTYPE HTML>
<html>
<head>
<title>ACPS Elementary Chromebook Portal</title>
<meta content="ACPS Elementary Chromebook Portal" name="description">
<meta content="" name="keywords">
<meta content="TRUE" name="MSSmartTagsPreventParsing">
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<link href="css/style.css" type="text/css" rel="stylesheet">
</head>
<body>
<header>
</header>
<div class="container">
<!--start application buttons-->
<ul class="app_btns">
<li>
<a href="http://go.imaginelearning.com"><div id="kinder"></div></a>
</li>
<li>
<a href="https://hosted35.renlearn.com/32112/"><div id="first"></div></a>
</li>
<li><a href="https://www.reflexmath.com/"><div id="second"></div></a>
</li>
</ul>
<!--end application buttons-->
</div>
<div class="footer">
<footer>
<center>Copyright 2019 ACPS</center>
</footer>
</div>
</body>
</html>
<html>
<head>
<title>ACPS Elementary Chromebook Portal</title>
<meta content="ACPS Elementary Chromebook Portal" name="description">
<meta content="" name="keywords">
<meta content="TRUE" name="MSSmartTagsPreventParsing">
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<link href="css/style.css" type="text/css" rel="stylesheet">
</head>
<body>
<header>
</header>
<div class="container">
<!--start application buttons-->
<ul class="app_btns">
<li>
<a href="http://go.imaginelearning.com"><div id="kinder"></div></a>
</li>
<li>
<a href="https://hosted35.renlearn.com/32112/"><div id="first"></div></a>
</li>
<li><a href="https://www.reflexmath.com/"><div id="second"></div></a>
</li>
</ul>
<!--end application buttons-->
</div>
<div class="footer">
<footer>
<center>Copyright 2019 ACPS</center>
</footer>
</div>
</body>
</html>
Here is the CSS of the document:
[code]
html {
background-color: rgb(0, 124, 255);
font-family: verdana, sans-serif;
font-size: 12px;
color: rgb(255 255 255);
}
body {
background-color: rgb(255, 255, 255);
margin: auto;
width: 1300px;
}
a {
outline: none;
}
img {
border-style: none;
}
/*Main Header*/
header {
height: 240px;
width: 1300px;
background-image: url(../images/aes_header.gif);
/*! float: left; */
}
/*Main Header*/
/*Application Button Grid*/
.container {
height: 420px;
width: 1300px;
background: rgb(255,255,255);
float: left;
}
.app_btns {
margin: 10px 0 433px 17px;
padding: 0;
list-style: none;
position: relative;
width: 200%;
}
.app_btns li {
position: relative;
float: left;
overflow: hidden;
width: 16.6666667%; /* Fallback */
width: -webkit-calc(100% / 6);
width: calc(100% / 6);
}
.app_btns li a,
.app_btns li a img {
display: block;
width: 100%;
cursor: pointer;
}
.app_btns li a img {
max-width: 100%;
}
/*Application Button Grid*/
/*Application Buttons - Hover*/
#kinder {
background-image: url('../images/k.gif');
height: 400px;
width: 400px;
}
#kinder:hover {
background-image: url('../images/k_dn.gif');
}
#first {
background-image: url('../images/1.gif');
height: 400px;
width: 400px;
}
#first:hover {
background-image: url('../images/1_dn.gif');
}
#second {
background-image: url('../images/2.gif');
height: 400px;
width: 400px;
}
#second:hover {
background-image: url('../images/2_dn.gif');
}
#renplace:hover {
background-image: url('../images/rp_dn.png');
}
/*Application Buttons - Hover*/
/*Footer*/
.footer {
width: 1300px;
float: left;
}
footer {
text-align: center;
vertical-align: middle;
line-height: 90px;
}
[code]