I'm trying to create a website using the "basic gray" HTML 5 theme that comes with the software.

How can I get rid of the big empty space to the right of the page? This shows both when in the preview window and also when I "test with default browser" (which is Firefox).

I haven't changed anything in the coding.

Your help will be greatly appreciated. Thank you

Go into the style sheet look for the body element and at the bottom of that you will see width. Change it to read 100%. That will do what you want I believe.

I changed the width at the bottom of the body element, as you said, but it didn't fix the problem

Here's the full code for the css:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}

body {
line-height: 1;
}

ol, ul {
list-style: none;
}

blockquote, q {
quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}

/* remember to define focus styles! */
:focus {
outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}

del {
text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}

/* Reset for HTML 5 Elements
----------------------------------------------------------------------------------------------------*/

/* tells browsers that don't read html 5 tags to render like divs */
header, footer, aside, nav, article, section {
display: block;
margin: 0;
padding: 0;
}

/* clears containers with floated elements, no need for extra markup! */
.clear:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

/* Layout
----------------------------------------------------------------------------------------------------*/

body {
background: #f0f0f0;
border: none;
color: #333;
margin: 0 auto;
font: 14px/24px Helvetica, Arial, sans-serif;
width: 960px;
}

h1 {
font: normal bold 34px/50px Arial, Helvetica, sans-serif;
padding-top: 30px;
}

h2 {
font-size: 28px;
line-height: 44px;
padding: 22px 0;
}

h3 {
font-size: 18px;
line-height: 22px;
padding: 11px 0;
}

p {
font-weight: normal;
padding-bottom: 22px;
}

a {
color: #CC6600;
text-decoration: none;
}

a:visited {
color: #CC6600;
outline: none;
text-decoration: none;
}

a:hover {
color: #FF9900;
text-decoration: underline;
}

a:active {
color: #CC6600;
outline: none;
text-decoration: none;
}

a:focus {
outline: 1px dotted;
}

#mast h1 {
padding: 30px 0 20px 40px;
}

nav#global {
padding: 10px 0;
position: absolute;
left: 0;
width: 100%;
background-color: #333;
}

nav#global ul {
margin: 0 auto;
width: 960px;
border: none;
}

nav#global ul li {
display: inline;
list-style: none;
padding-left: 40px;
}

nav#global ul li a {
color: #777;
background-color: #222;
border: 2px solid #222;
font: normal bold 14px/44px Arial, Helvetica, sans-serif;
padding: 10px;
margin-right: 40px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
text-align: center;
}

nav#global ul li a:hover, nav#global ul li a:focus {
background-color: #111;
border: 2px solid #444;
color: #FF9900;
text-decoration: none;
}

nav#global ul li a.selected {
color: #fff;
}

nav#global ul li a.selected:hover {
color: #FF9900;
}

#intro {
background-color: #ccc;
margin-top: 100px;
padding: 40px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}

#intro header h2 {
font-weight: normal;
line-height: 30px;
padding: 0 0 15px 0;
width: 370px;
}

#intro p {
width: 370px;
}

#intro a {
color: #fff;
background-color: #333;
font: normal bold 14px/44px Arial, Helvetica, sans-serif;
padding: 10px;
margin-right: 40px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
text-align: center;
}

#intro a:hover {
color: #FF9900;
background-color: #222;
text-decoration: none;
}

#intro #photo {
background-color: #fff;
float: right;
margin-top: -170px;
-moz-box-shadow: 0 1px 10px #333;
-webkit-box-shadow: 0 1px 10px #333;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
width: 400px;
height: 300px;
}

#photo div {
background-color: #333;
margin: 10px auto 0 auto;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
width: 380px;
height: 260px;
text-align: center;
}

#photo div h3 {
color: #fff;
font-size: 25px;
line-height: 25px;
padding: 115px 0 0 0;
}

div#main {
background: url(../images/main_bkgd.png) repeat-y top right;
border: none;
}

#main #articles {
float: left;
margin-left: 40px;
width: 600px;
border: none;
}

article {
border-bottom: 1px dotted #aaa;
padding: 15px 0;
}

article:last-child {
border-bottom: none;
}

aside {
float: right;
margin-top: 40px;
margin-right: 40px;
}

aside section {
background-color: #F5F5F5;
margin-bottom: 30px;
padding: 20px 40px 20px 20px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

aside h3 {
padding: 0 0 11px 0;
}

nav#categories ul li, nav#archives ul li {
list-style: none;
margin: 5px 0;
}

footer {
position: absolute;
left: 0;
width: 100%;
background-color: #333;
}

footer div {
margin: 0 auto;
padding: 40px 0 20px 40px;
width: 920px;
border: none;
}

footer div section {
color: #777;
float: left;
margin-right: 25px;
width: 230px;
border: none;
}

footer div section h3 {
color: #fff;
}

nav#blogRoll ul li, nav#siteMap ul li {
color: #777;
list-style: disc;
margin-left: 15px;
}

footer #about {
margin-right: 60px;
width: 330px;
}

It would have been best if you had posted an url to the site, as it is always easier to give some meaningful advice when we can see the problem.

In this case I don't know which is your main container, maybe it is the div#main. Try adding a
margin: auto;
to that div in the style sheet. If that doesn't fix your problem, you'll have to post your URL.

It works fine for me. I took the same Theme you are wanting to us and change that one part in the style sheet and I no longer have that white space on the left side. Now the gray area goes completely to the left. I changed the the 960px to 100%.

body {
background: #f0f0f0;
border: none;
color: #333;
margin: 0 auto;
font: 14px/24px Helvetica, Arial, sans-serif;
width: 100%;

Sorry I just re-read your post and I was thinking the left side. You are wanting the right side.

@Inger Eik: I don't have an url to the site because it has not yet been uploaded but, you can see the page if you choose the "basic gray" theme that comes with the HTML Editor.

@Jack Tipton: Yes, it's the space to the right of the page that I want to get rid of. Any other ideas on how to do it?

Tony, What size monitor are you using?

Tony, what you want will involve modifying the style sheet in different areas. I am far from an expert on this forum but I did play around with the page and the style sheet that is linked to it and when you change certain elements it will effect others.
If you change the following

#main #articles {
float: left;
margin-left: 40px;
width: 600px;
border: none;
}

so the width reads 900px, that will extend the text over to the left also delete the background img tag in this area

div#main {
background: url(../images/main_bkgd.png) repeat-y top right;
border: none;
}

This will remove the light gray area on the left. The problem being now is the two nav area for Categories and Archives are now pushed down to the bottom of the page and on the left side,

Like I mentioned one alteration of a style sheet will cause issues in other areas. I am sure some of the much more knowledgeable members will have a better way to do what you want, and not go through what I have done, but maybe it will work for you.

@Eric Rohloff: I'm using a 17-inch Acer Aspire laptop. Resolution is 1600x900.

@Jack Tipton: I tried what you said but, besides changing the position of the "categories" and "archives" area, I'm still left with the empty space to the right of the page (You can see it if you drag the the horizontal bar from left to right).

The horizontal bar at the bottom of the page wouldn't be there if the unwanted space didn't exist.