How can I make the page expand to fit the screen? - html

Question

Notice how the page is centered in the middle. How can I make it expand to fit the screen, including the columns? Sorry, I'm brand new to coding. I included most of the code because I have no idea where to find it. Hopefully one of you can help. I'm assuming it must be on body or on the home page?
/* Base styles */
*, input[type=search] {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html {
background-color: $color_2;
}
body {
color: $color_4;
font-family: $font_1;
font-size: 13px;
font-weight: lighter;
line-height: 1.5;
margin: 0;
margin-left: 0px;
padding-bottom: 100px;
}
img {
max-width: 100%;
vertical-align: middle;
}
img[width], img[height] {
max-width: none;
}
figure > img {
display: block;
}
a {
color: $color_5;
font-family: $font_2;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
ul, ol {
list-style: none;
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
text-align: left;
width: 100%;
}
[dir="rtl"] table {
text-align: right;
}
td, th {
border-color: #eeeeee;
border-style: solid;
padding: 18px;
}
th {
border-width: 1px 0;
color: #bebebe;
font-size: 11px;
font-weight: normal;
white-space: nowrap;
}
td {
border-width: 0 0 1px 0;
}
h1, h2, h3, h4, h5, h6 {
color: black;
font-weight: 400;
}
h1 {
font-size: 20px;
}
input, label {
display: inline-block;
vertical-align: middle;
}
label {
font-size: 12px;
}
input[type="checkbox"] + label {
margin-left: 5px;
}
input, textarea {
border: 1px solid #dddddd;
border-radius: 2px;
padding: 10px;
}
textarea {
height: 100px;
padding: 7px 10px;
resize: vertical;
}
textarea, input[type=text] {
width: 100%;
}
input, textarea, select {
color: #555;
}
input::-ms-clear {
display: none;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
margin: 0;
-webkit-appearance: none;
}
::-webkit-input-placeholder {
color: #cccccc;
}
:-ms-input-placeholder {
color: #cccccc;
}
::-moz-placeholder {
color: #cccccc;
}
/* Buttons */
button, [role=button], [type=button], [type=submit] {
border-radius: 4px;
border: 1px solid #dddddd;
color: $color_5;
cursor: pointer;
display: inline-block;
padding: 5px 10px;
position: relative;
vertical-align: middle;
white-space: nowrap;
}
a[role=button]:hover {
text-decoration: none;
}
input[type=submit] {
background: #444;
border-color: transparent;
color: #FFF;
padding: 10px 30px;
}
input[type=submit][disabled] {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
/* IE 8 */
opacity: 0.4;
}
button img, [role=button] img {
border-radius: 4px;
margin: 0 5px 0 0;
height: 20px;
position: relative;
top: -1px;
vertical-align: middle;
}
[dir="rtl"] button img, [dir="rtl"] [role=button] img {
margin: 0 0 0 5px;
}
/* Forms */
.form {
max-width: 505px;
}
.form-field + .form-field {
margin-top: 25px;
}
.form-field label {
display: block;
font-weight: bold;
margin-bottom: 5px;
}
.form-field input[type=checkbox] + label {
margin: 0 0 0 10px;
}
.form-field.required > label:after {
content: "*";
color: red;
margin-left: 2px;
}
.form-field p {
color: #bebebe;
font-size: 11px;
}
.form-field input[type=number], .form-field input.datepicker {
width: 150px;
}
.form form + form, .searchbox {
margin-top: 25px;
}
.searchbox-suggestions {
background-color: #fff;
border: 1px solid #eeeeee;
border-radius: 4px;
padding: 10px 20px;
}
.searchbox-suggestions li {
padding: 5px 0;
}
[data-loading="true"] input,
[data-loading="true"] textarea {
background: transparent url(/hc/assets/loader.gif) 99% 50% no-repeat;
background-size: 16px 16px;
}
.form footer {
border-top: 1px solid #eeeeee;
margin-top: 40px;
padding-top: 30px;
text-align: right;
}
.form footer a {
color: #cccccc;
cursor: pointer;
margin-right: 15px;
}
/* Navigation menus */
.nav li, .nav-bordered li, .nav-spaced li {
display: inline-block;
font-weight: bold;
}
.nav li a, .nav-bordered li a, .nav-spaced li a {
font-weight: normal;
}
.nav-bordered li + li {
border-color: #eeeeee;
border-style: solid;
border-width: 0 0 0 1px;
margin: 0 0 0 30px;
padding: 0 0 0 30px;
}
[dir="rtl"] .nav-bordered li + li {
border-width: 0 1px 0 0;
margin: 0 30px 0 0;
padding: 0 30px 0 0;
}
.nav-spaced li + li {
margin: 0 0 0 40px;
}
[dir=rtl] .nav-spaced li + li {
margin: 0 40px 0 0;
}
/* Search box */
.search-box, .sub-nav .search {
position: relative;
}
.search-box:before, .sub-nav .search:before {
content: "\1F50D";
font-family: "entypo";
font-size: 1.25em;
line-height: 0;
position: absolute;
text-align: center;
top: 50%;
width: 2.5em;
z-index: 1;
}
.search-box input, .sub-nav .search input {
line-height: 1.2em;
font-weight: lighter;
padding: .75em 2.7em;
width: 100%;
-webkit-appearance: none;
}
.search-box input[type="submit"], .sub-nav .search input[type="submit"] {
display: none;
}
/* Breadcrumbs */
.breadcrumbs li {
color: #bebebe;
display: inline-block;
font-size: 12px;
}
.breadcrumbs li + li:before {
content: ">";
margin: 0 4px;
}
.breadcrumbs li a {
color: $color_4;
}
/* Labels */
.label, .request-status {
border-radius: 20px;
display: inline-block;
font-size: 10px;
padding: 3px 10px;
text-transform: uppercase;
white-space: nowrap;
}
/* Metadata */
.meta, .meta-group {
color: #cccccc;
display: inline-block;
font-size: 11px;
}
.meta-group * + *:before {
content: "\2022";
font-size: 8px;
margin: 0 10px;
}
/* Helper classes */
.clearfix:before, .clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
/* Social share links */
.share {
white-space: nowrap;
}
.share li, .share a {
display: inline-block;
}
.share a {
height: 30px;
line-height: 30px;
overflow: hidden;
vertical-align: middle;
width: 30px;
}
.share a:before {
background: #CCC;
border-radius: 50%;
color: #FFF;
display: inline-block;
font-family: "entypo";
text-align: center;
width: 100%;
}
.share a:hover {
text-decoration: none;
}
.share-twitter:before {
content: "\F309";
}
.share-facebook:before {
content: "\F30C";
}
.share-linkedin:before {
content: "\F318";
}
.share-googleplus:before {
content: "\F30F";
}
/* Pagination */
.pagination {
margin: 20px 0;
text-align: center;
}
.pagination * {
display: inline-block;
}
.pagination li {
border: 1px solid #eeeeee;
float: left;
margin-left: -1px;
}
[dir="rtl"] .pagination li {
float: right;
}
.pagination a, .pagination span {
color: inherit;
font-size: 12px;
padding: 5px 12px;
}
.pagination-current {
background-color: #f9f9f9;
color: #bebebe;
}
.pagination-first {
border-radius: 3px 0 0 3px;
}
[dir="rtl"] .pagination-first {
border-radius: 0 3px 3px 0;
}
.pagination-last {
border-radius: 0 3px 3px 0;
}
[dir="rtl"] .pagination-last {
border-radius: 3px 0 0 3px;
}
/* Markdown styles */
.markdown {
word-wrap: break-word;
line-height: 1.7;
}
.markdown img {
max-width: 70%;
}
.markdown hr {
background-color: #eeeeee;
border: 0;
height: 1px;
}
.markdown ul, .markdown ol {
list-style-position: inside;
padding: 0 15px;
}
.markdown ul {
list-style-type: disc;
}
.markdown ol {
list-style-type: decimal;
}
.markdown pre {
background: #f9f9f9;
border: 1px solid #eeeeee;
border-radius: 3px;
padding: 10px 15px;
overflow: auto;
white-space: pre;
}
.markdown blockquote {
border-left: 1px solid #eeeeee;
color: #bebebe;
font-style: italic;
padding: 0 15px;
}
/* Frame */
main, .header-inner, .footer-inner {
margin: 0 auto;
padding: 20 20px;
width: 500px;
}
/* Columns */
.main-column, .side-column {
display: inline-block;
vertical-align: top;
}
.main-column {
width: 620px;
}
.side-column {
width: 270px;
margin-left: 45px;
}
[dir=rtl] .side-column {
margin-left: 0;
margin-right: 45px;
}
/* Header */
.header {
background: $color_1;
border-bottom: 1px solid #eeeeee;
}
.header-inner {
display: table;
height: 100px;
}
.logo, .user-nav {
display: table-cell;
vertical-align: middle;
}
.logoHD, .user-navHD {
display: table-cell;
position: left;
left: 80px;
vertical-align: middle;
}
.logo img {
max-height: 60px;
}
.logoHD img {
max-height: 60px;
}
.user-nav {
text-align: right;
}
.user-navHD {
left: center;
}
.user-nav > * {
display: inline-block;
margin: 0 0 0 25px;
}
.user-navHD > * {
display: inline-block;
margin: 0 0 0 25px;
}
[dir=rtl] .user-nav {
text-align: left;
}
[dir=rtl] .user-nav > * {
margin: 0 25px 0 0;
}
/* Home page */
.hero-unit {
display: block;
font-size: 22px;
padding: 80px 60px;
}
body.community-enabled .knowledge-base, body.community-enabled .community {
display: inline-block;
vertical-align: top;
}
body.community-enabled .knowledge-base {
width: 620px;
}
.knowledge-base, .community {
display: inline-block;
vertical-align: top;
}
.knowledge-base {
width: 100%;
}

Answer 1

Change
.side-column {
width: 270px;
margin-left: 45px;
}
.main-column {
width: 620px;
}
To
.side-column {
width: 0px;
margin-left: 0px;
}
.main-column {
width: 100%;
}

Answer 2

You have to either use percentages or use something like media queries to set certain widths of the content. An example of percentages would be:
main, .header-inner, .footer-inner {
margin: 0 auto;
width: 90%;
}

Answer 3

You have main set to 500px width. You need to remove that width style. Then main will take up the full width of it's parent container which is the body.
The principle behind this is that a block-level element takes up the full width of it's parent container by default. Since main is a block-level element you don't have to set 100%; it defaults to 100% automatically.
As an aside, your padding style for main is malformed. You have padding: 20 20px; you need to use units, not just numbers. So either write padding: 20px 20px; or even better just padding: 20px;

Answer 4

It looks like you're using fixed sizes in your CSS. For example, the lines below:
.main-column {
width: 620px;
}
.side-column {
width: 270px;
margin-left: 45px;
}
are assigning fixed width values. (By fixed, I mean using units like px, mm, in). Rather, it'd be appropriate to use relative sizes (i.e., percents usually). For larger, containing elements, I tend to use units of vw (viewport width) and vh (viewport height). Doing likewise in your CSS where appropriate should help. Also this makes it easier to optimize for other device sizes should you choose to use CSS media queries later.