How to make the make ground colour the full page width - Homepage.tpl

[Dtorr1981]

Hi All,

 

I am carrying on with my customisation learning curve, and have been working on a mock up here. Its a bit rough around the edges and some images need to be altered in size, however, i am working on my domain name checker section and would like the full page width background colour to be #4c90fe.

 

My homepage.tpl code is (i am including html comments for my editting purposes, i will change these to smarty comments on completion):

 

<!--Add Price table-->
<section>
<div class="box centered gkmod-1 nomargin">
  <h2 class="header">A price that fits your needs</h2>
  <div class="content">
     <div class="customcentered">
        <p class="gkCentered">We provide simple affordable web design and hosting packages . Do not see what you need? Click to get a quote and see what extras are available, logo design, blog inclusion, social media integration....whatever you have in mind we can help.</p>
        <div class="gkPriceTable gkPriceTableAnimated col3">
           <dl class="loaded">	
		<i class="fa fa-user fa-2" aria-hidden="true"></i>
              <dt>Personal</dt>
              <dd class="gkPrice">£***<small> Per month</small></dd>
              <dd>Free Domain Name*</dd>
              <dd>Free 12 Month Hosting</dd>
              <dd>5 Email Addresses</dd>
              <dd>2GB Storage</dd>
              <dd>Content Management System</dd>
              <dd>5 hours support included</dd>
              <dd>Online Tutorials</dd>
              <dd>Set-Up included</dd>
              <dd></dd>
              <dd><a href="#">Choose</a></dd>
           </dl>
           <dl class="gkPremium loaded">
		<i class="fa fa-users fa-2" style="color:#fff;" aria-hidden="true"></i>
              <dt>Small Business</dt>
              <dd class="gkPrice">£***<small> Per month</small></dd>
              <dd>Free Domain Name*</dd>
              <dd>Free 12 Month Hosting</dd>
              <dd>Unlimited Email Addresses</dd>
              <dd>10GB Storage</dd>
              <dd>Content Management System</dd>
              <dd>Integrated Shopping Cart</dd>
              <dd>Standard SSL Certificate</dd>
              <dd>10 hours support included</dd>
              <dd>Online Tutorials</dd>
              <dd>Set-up Included</dd>
              <dd><a href="#">Choose</a></dd>
           </dl>
           <dl class="loaded">
		<i class="fa fa-university fa-2" aria-hidden="true"></i>
              <dt>E-Commerce</dt>
              <dd class="gkPrice">£***<small> Per month</small></dd>
              <dd>Fully Ofsted Compliant</dd>
              <dd>Complete School colour Integration</dd>
              <dd>Free 12 Month Hosting</dd>
              <dd>10GB Storage</dd>
              <dd>Content Management System</dd>
              <dd>Standard SSL Certificate</dd>
              <dd>Online Tutorials</dd>
              <dd>Set-up Included</dd>
              <dd><a href="#">Choose</a></dd>
           </dl>
        </div>
        <p class="gkDisclaimer"><strong>*</strong> If you already have a domain we can help you point this to your new site, school domains are not included.</p>
     </div>
  </div>
</div>
</section>
<!--end price table-->

<!--Start of domain name checker-->
<section id="name-checker">
<div>
hello world
</div>
</section>

<!--end of domain name checker-->
{*{if $twitterusername}

   <h2>{$LANG.twitterlatesttweets}</h2>

   <div id="twitterFeedOutput">
       <p class="text-center"><img src="{$BASE_PATH_IMG}/loading.gif" /></p>
   </div>

   <script type="text/javascript" src="templates/{$template}/js/twitter.js"></script>

{elseif $announcements}

   <h2>{$LANG.news}</h2>

   {foreach $announcements as $announcement}
       {if $announcement@index < 2}
           <div class="announcement-single">
               <h3>
                   <span class="label label-default">
                       {$announcement.rawDate|date_format:"M jS"}
                   </span>
                   <a href="{if $seofriendlyurls}{$WEB_ROOT}/announcements/{$announcement.id}/{$announcement.urlfriendlytitle}.html{else}announcements.php?id={$announcement.id}{/if}">{$announcement.title}</a>
               </h3>

               <blockquote>
                   <p>
                       {if $announcement.text|strip_tags|strlen < 350}
                           {$announcement.text}
                       {else}
                           {$announcement.summary}
                           <a href="{if $seofriendlyurls}{$WEB_ROOT}/announcements/{$announcement.id}/{$announcement.urlfriendlytitle}.html{else}announcements.php?id={$announcement.id}{/if}" class="label label-warning">{$LANG.readmore} »</a>
                       {/if}
                   </p>
               </blockquote>

               {if $announcementsFbRecommend}
                   <script>
                       (function(d, s, id) {
                           var js, fjs = d.getElementsByTagName(s)[0];
                           if (d.getElementById(id)) {
                               return;
                           }
                           js = d.createElement(s); js.id = id;
                           js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
                           fjs.parentNode.insertBefore(js, fjs);
                       }(document, 'script', 'facebook-jssdk'));
                   </script>
                   <div class="fb-like hidden-sm hidden-xs" data-layout="standard" data-href="{$systemurl}{if $seofriendlyurls}{$WEB_ROOT}/announcements/{$announcement.id}/{$announcement.urlfriendlytitle}.html{else}announcements.php?id={$announcement.id}{/if}" data-send="true" data-width="450" data-show-faces="true" data-action="recommend"></div>
                   <div class="fb-like hidden-lg hidden-md" data-layout="button_count" data-href="{$systemurl}{if $seofriendlyurls}{$WEB_ROOT}/announcements/{$announcement.id}/{$announcement.urlfriendlytitle}.html{else}announcements.php?id={$announcement.id}{/if}" data-send="true" data-width="450" data-show-faces="true" data-action="recommend"></div>
               {/if}
           </div>
       {/if}
   {/foreach}
{/if}*}

 

The css i have used is:

 

#name-checker  {
height:412px;
background-color:#4c90fe;
overflow: visible;
width:100%;
}

 

But it does not cover the entire width, am i missing a DIV somewhere does anybody know. Any support would be most appreciated?

 

Best Regards

Donna