asked on

Joomla v3 with Bootstrap v2 - How to Remove Right Margin

Hi Experts,

I can't seem to remove the right margin nor padding within the header tag which holds three sub-tags namely, header-1, header-2, header-3 even though i specified their values to be 0px as can been seen from the attached image.

Please help.

Thanks in advance,
Rick

Html Codes:

<?php
defined('_JEXEC') or die;

// Add JavaScript Frameworks
JHtml::_('bootstrap.framework');

// Load optional RTL Bootstrap CSS
JHtml::_('bootstrap.loadCss', true);

?>

<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width", initial-scal="1.0">
        <jdoc:include type="head" />
	
        <!--[if lt IE 9]>
		<script src="<?php echo $this->baseurl ?>/media/jui/js/html5.js"></script>
	<![endif]-->
        
        <!-- <title>Sample Tempalte</title>
        <link href="css/bootstrap.css" rel="stylesheet" type="text/css">
        <link href="css/bootstrap-responsive.css" rel="stylesheet" type="text/css">
        <link href="css/bootstrap-extended.css" rel="stylesheet" type="text/css"> -->
        
        <!-- Custom Fonts -->
        <link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
        
        <!-- Custom Styles -->
        <link href="templates/alpha1_0/css/custom.css" rel="stylesheet" type="text/css">
    </head>
    
    <body>
        <!-- Header Start -->
        <header class="row-fluid">
                
            <!-- Insert Logo Here -->
            <div id="header-1" class="span4">
                <jdoc:include type="modules" name="header-1" style="html5" />
            </div>

            <!-- Insert Slogan Here -->
            <div id="header-2" class="span4">
                <jdoc:include type="modules" name="header-2" style="html5" />
            </div>

            <!-- Insert Slogan Here -->
            <div id="header-3" class="span4">
                <jdoc:include type="modules" name="header-3" style="html5" />
            </div>
            
        </header>
        
    </body>
</html>

Open in new window

CSS Codes:

@charset "utf-8";
#header-1{
  background-color: red;
  margin-right: 0px;
  margin-left:  0px;
  border: 1px solid black;
}

#header-2{
  background-color: green;
  margin: 0px;
  padding:0px;
  border: 1px solid black;
}

#header-3{
  background-color: blue;
  margin: 0px;
  padding:0px;
  border: 1px solid red;
}

html {
  //width: auto !important;
  //overflow-x: hidden !important;
  border: 1px solid red;
  margin:0px;
  padding:0px;
}
body {  
  //width: auto !important;
  //overflow-x: hidden !important;
  border: 1px solid red;
  margin:0px;
  padding:0px;
  //background-color: yellow;
}

header {
  background:yellow;
  margin:0px;
  padding:0px;
}

Open in new window

website.jpg

COBOLdinosaur

Obviously, something else in the page is affecting the rendering post a link and we can do a diagnostic.

Cd&

ASKER CERTIFIED SOLUTION

Steve Bink

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Ricky Nguyen

ASKER

Thank you for both or your replies. I'll will try using Firebug and will post back short.

Cheers
Rick

Ricky Nguyen

ASKER

I found the element that was being targeted by bootstrap.

.row-fluid .span4 {
width: 31.6239%;
}

The total is not 100% and therefore 5.1283% leftover is what we see on the right.

I made the adjustment to 33.33% and it fits nicely.

Thanks for your help

Ricky Nguyen

ASKER

Can you please help me with the following question as well?

https://www.experts-exchange.com/questions/28291432/Joomla-3-JFactory-getDocument-countModules.html