How to alter text width in posts

Hi,

I have been trying with no success to make my pages on this theme a little wider and it is confusing me. I have changed the page width under this section of code:

/* Primary */
.content-area {
	float: right;
	width: 540px;
	height: auto;
	padding: 0 40px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing:    border-box;
	box-sizing:         border-box;
}

Everything is 540px and I want something more like 800px, so changing this made the width of the article wider.

Then this code:

/* Grid */
#page {
	position: relative;
	z-index: 1;
	margin: 0;
	width: 940px;
}
#page:before {
	content: '';
	display: block;
	position: fixed;
	z-index: -1;
	top: 0;
	left: 400px;
	width: 540px;
	height: 100%;
	background: #fff;
}

allows you to change the width of the content, but when I change the (I believe) correct section under page:before width to something larger (say 800px, and I tried this with the content-area width larger than this number) it does make it wider, but it also ruins the positioning and places it lower and farther left, maybe because it is placed “relative,” but relative to what? Isn’t that something that is in the html code and not the CSS? I am confused. Please help.