Sherpa, you’re a fast moving target
#topLogo is working fine because the class .row-fluid (and thus, width:100%) has been deleted.
Things have changed since I posted that message, but the lesson (same as Ralph’s) is sound.
Just an FYI: If you are having any difficulty trouble-shooting, it MAY be because some properties exist in the bootstrap.min.css file AND in your local style.css. That can be confusing.
.row-fluid seems to do two things:
(1) apply a width:100%
(2) apply a clearfix
The clearfix you probably need if inner boxes are floated, but the width:100% is causing you some grief because any padding or margins added to those containers makes the effective width wider than 100% and triggers the horizontal scroll bars. Remember, block devices (divs, etc) occupy the full width of the page by default, so in most cases, forcing width:100% is unnecessary.
You seem to have applied .row-fluid in a bunch of places. I speculate that most of them are probably unnecessary. Declaring a div to be “row-fluid” doesn’t make it more fluid, so I’m a little puzzled by what appears to be the inordinate use of “row-fluid”. Doesn’t bootstrap allow you to apply clearfix without width:100%?
Take a look at the items that I’ve marked in red. If they are deleted or commented out, the horizontal scroll bar is no longer triggered.
<div id=“content” class=“row-fluid”>
style.css (line 146)
[color=red]border: 2px solid #D4D4D4;[/color]
border-radius: 10px 10px 10px 10px;
<div id=“wrap” class=“container-fluid”>
style.css (line 80)
I don’t speak bootstrap grid, so test try these suggestions with an open mind. They worked for me when I tested them in Firefox.