How do I make a wordpress theme full width?

Question

I tried my best but I couldn't make the following theme full width/screen by editing the CSS. I'd be very much grateful if you could show me or give me a hint regarding this customization.

http://demo.mythemeshop.com/sociallyviral/

You see the footer in the above theme(It's full width), how do I make the whole theme's body/container full width like the footer?

Note: I tried adding/removing margins/paddings etc.

Answer 1

Replace the following styles and that will do it

Style.css line 305

.primary-navigation {
display: block;
float: left;
width: 100%;
text-align: left;
}

Style.css line 174

#page, .container {
max-width: 100%;
min-width: 240px;
}

Responsive.css line 63

.main-container {
max-width: 100%;
}

Answer 2

To accomplish something like this http://i.imgur.com/mekVyJg.jpg you will need to do the following changes in your css file:

.main-container {width:100%;max-width:100%}
#page, .container {width:100%}

Answer 3

do the following change in responsive.css file

.main-container {
    /** max-width: 96% replace this with bellow  */
    max-width: 100%;
}

remove these styles from style.css file

.main-container{
    width: 1170px;
}
.container{
    max-width: 1170px;
}
.primary-navigation {
    max-width: 1170px;
}

Then your site will work full-width

Answer 4

Try to click on Appearance >> Customize >> Additional CSS.

.container {
    width: 70%;
}