Full witdh DIV with CustomizR theme - html

Question

I'm currently using Customizr theme, with the default settings for the pages set to "full width / no sidebars".
However, when I try do do something like this within a page :
<div id="blue-background">
<h1 style="text-align: center;">Full width text with background color ? >/h1>
</div>
with the corresponding CSS code :
#blue-background{
width: 100%;
float: left;
padding: 20px;
background: #2680BE;
position: relative;
}
I still have white margins around my text. Increasing the width doesn't seem to be a good solution, so how can I do ?
here is an example of what I get with this code:
http://www.cirnu.com/bandeau/

Answer 1

Your main-wrapper should look like this
<div id="main-wrapper">
<div class="tc-hot-crumble container" role="navigation"><div class="row"><div class="span12"><div class="breadcrumb-trail breadcrumbs" itemprop="breadcrumb"><span class="trail-begin">Accueil</span> <span class="sep">»</span> <span class="trail-end">Bandeau</span></div></div></div></div>
<div role="main">
<div class="row column-content-wrapper">
<div id="content" class="span12 article-container">
<article id="page-623" class="post-623 page type-page status-publish hentry row-fluid">
<header class="entry-header">
<h1 class="entry-title format-icon">Bandeau</h1>
<hr class="featurette-divider __before_content">
</header>
<div class="entry-content">
<div role="main">
<div id="blue-background">
<div class="container">
<h1 style="text-align: center;">Full width text with background color ?</h1>
</div>
</div>
</div>
</div>
</article>
</div><!--.article-container -->
</div><!--.row -->
</div><!-- .container role: main -->
</div>
Then you'll need to change some CSS rules:
#blue-background {
padding:20px 0;
/* then all the other rules you already have */
}
.article-container {
width:100%;
}