bootstrap - sticky footer where the position is not fixed gets a weird line across page

Question

I've got a sticky footer and have changed it multiple times because I kept encountering various issues. The reason I have my code like this is because in previous attempts, when the content filled up the page, on a mobile device, the footer would get taller to accomodate the stacked buttons, and it would overlap the content. Other versions I tried would append a footer to the end of the content box, but it would be halfway up the page if the content only filled half the page. This current version I have works great, except there's a weird line across the content box where I'm assuming the footer placeholder is, even though the footer sticks to the bottom. Can someone please help me? I have a fiddle here: http://jsfiddle.net/7sPN6/1/. I also want to clarify that the bar only becomes visible when the height of the browser is taller. I also wanted to explain that in my css, I set the position of the footer to relative in order to be able to scroll the content so it wouldn't get overlapped by the footer.

<!-- ------- wrap ------- -->
<div id="wrap">
<div id="main">
    <!-- ------- begin header ------- -->
    <div id="header"> 
        <div class="row">
            <div class="col-xs-4">
                <div class="brand img-responsive" style="margin-left: 10px">logo
                </div>
            </div>

            <div class="col-xs-3">
            </div>

            <div class="col-sm-5 text-right">
                <div class="brand"> Portal
                </div>
            </div>
        </div>

        <!-- ------- make logo smaller on smaller screens ------- -->
         <div class="row">
            <div class="col-sm-9 hidden-lg hidden-md">
                <div class="logo">        
                    <a class="logo"><img src="img/logosm.png" class="img-responsive"></a> 
                </div>
            </div> 

            <div class="col-sm-3">                       
            </div>
          </div>
  <hr>
</div>


<!-- ------- content ------- -->  
    <div class="container">
        <div class="span3">
            <div class="box">
            <h2 class="intro-text text-center">Announcements</h2>
                <hr>
                <ul>
                    <li>blah blah blah</li>
                    <li>blah blah blah</li>
                    <li>blah blah blah</li>
                    <li>blah blah blah</li>
                    <li>blah blah blah</li>
                </ul>
            </div>
        </div>
    </div><!-- /.container -->

</div><!-- /.main -->
</div><!-- ------- end wrap ------- -->

<!-- ------ begin footer-------- -->
<div id="footer">
<div class="row navbar-inverse navbar-justified navbar-fixed-bottom row-fluid">
    <div class="col-sm-12 text-center"><!-- centers buttons on screen -->
        <ul class="nav navbar-nav">
            <li><button type="button" class="btn btn-sm fixed_button"><i class="icon-bug"></i>  Submit Bugs</button></li>
            <li><button type="button" class="btn btn-sm fixed_button"><i class="icon-lightbulb"></i> Feature Requests</button></li>
            <li><button type="button" class="btn btn-sm fixed_button"><i class="icon-envelope-alt"></i> Contact</button></li>
        </ul>
    </div>
</div>

</div>

<!-- ------- end footer ------- -->

Answer 1

I inspect your code and found that in your css where #main Id is styled. You gives it a property overflow:auto;. if you want to remove that horizontal bar over your footer you have to change this property to overflow:hidden; or either remove it.

This is because in your code #wrap has width:100%; and In bootstrap 3 the row has a property of margin-left:-15px and margin-right:-15px. and because of this reason it is getting -15px space to the right.

because as per the getbootstrap.com

Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.