starter theme full screen width CSS-hack

I recently downloaded the Roots starters theme from

I love the fact it supports Bootstrap’s 3 grid system as I worked a few times for several clients. Now the problem I’m facing when using the Roots theme is that all of the content is wrapped in a container (See the code below). The code is from the base.php file.

<div class="wrap container" role="document">
<div class="content row">
    <?php include roots_template_path(); ?>
</div><!-- /.content -->
</div><!-- /.wrap -->

So, the container and content classes do center all of the content, Even if I make my own template file, It’ll always center the content at the middle of the screen.

Now I found a solution (CSS hack) for this that’s quite simple but I don’t realy know if it is acceptable, although it works in Chrome. When I login to my Wordpress account and edit a page I inserted the following:

<section class="first">

And my CSS looks like this: (Give it a full colored background screen width)

html, body{

margin:0 -500em;
padding:0 500em;

Within the Wordpress text-editor the content is now split into different sections. With the use of CSS I now can give different sections another color wich expands to the full width of the screen. This is what I wanted to achieve. But is this a good solution or may it be more trouble in the future?

Here are some various threads about this:

Please use the search feature next time to see if anything similar has been posted before.

1 Like