Getting rid of excess white space

[tbite]

Hi, I am working on my page and I just added a new template which I having trouble adjusting.

Essentially, I want to get rid of the white space to the right.

This is a link to the image for further clarification.

http://i.imgur.com/YiVbFk8.jpg

Or you can look at the website itself: http://www.blackborderbuild.com/property-blog

These are the codes.

}

.container {
margin: 0 auto;
width: 1100px;
}

#header-wrap,
#banner-wrap,
#nav-wrap,
#main-wrap,
#footer-wrap,
#total-wrapper
{
width:100%;
min-width:1050px;
background:#fff;
}

/* Main Content
——————————————————————————–*/

.no-header-page #main-wrap {
border-top:1px solid #eee;
}

#main-wrap .container {
padding:50px 0;
}

.blog-post .blog-separator {display:none;}

.blog-post .blog-header {
margin-bottom:20px !important;
}

.blog-sidebar h2 {
padding:1em 0 .3em;
}

.blog-sidebar h2.blog-author-title {
padding:0 0 0.3em;
}

h2.blog-title, .blog-post .blog-header h2.blog-title {padding-bottom:5px !important;}
h2.blog-title a, .blog-post .blog-header h2.blog-title a { border:none;}

[Alen]

Please don’t do code dumps, it’s very hard to read.

As for your question:

the class .container has a width of 1100px. Inside you have a table that stretches full width, with a sidebar of defined width. You need to eliminate the container which will allow table to stretch full width across the screen.

[tbite]

sorry I posted that much code, because I wasn’t sure what was relevant and what wasn’t.

I will edit my post now.

What you said worked, but now it has created some other challenges.

[Alen]

.container is a generic class name. Its most likely used in other areas of your site. It’s used to contain content so it can conform to some sort of grid. It provides a wrapper with predictable results.

You could add another class that overrides the width.

So in your HTML

class='container container-full'

.container-full {
    width:100%;
}

[tbite]

Thanks a lot for your help, it is much appreciated, The width override worked a lot better.

Another thing, I did was to preserve the code

margin: 0 auto;

When I took that out before, it seemed to off centre the header.

[Alen]

Yup.

margin: 0 auto;

is a shorthand for

margin-top: 0;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;

It centers block level elements with defined width.

http://codepen.io/anon/pen/EoxGD

[Author]

Posts