Hello all,

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:


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]

Here. The width I've commented out below.



You make ul.app_btns twice as wide as the box it's in, which is div.container that is 1300px wide. So 2600px plus with margins and stuff. Wider than most screens.

Also, using images for navigation, or content for that matter, with no text alternative isn't a good idea. But maybe it doesn't matter so much if it's for internal use. At least not until you get a blind pupil or staff member. Think about it.

Thank you kindly. I was totally overlooking that. I have made the necessary changes and it now looks exactly how I want it. I was even able to clean up the code a bit.

You are welcome.

Here is the result of your help: http://www.byelich.org/acps/test/index.html

Thanks again!