sarakinos sarakinos - 5 months ago 10
CSS Question

Why bootstrap simple full width layout causes overflow

As I'm struggling to understand front end development concepts I have the following question:

I'm developing a simple layout with Bootstrap . The page is going to be in a full width layout so after I started coding i've noticed a horizontal scrollbar in the window. Hacking it with overflow-hidden doesn't seem right to me. Can someone explain why this happens and how to avoid it?

Side question, is this the right markup for a header like the one below?
///////
Header
//////

---Link----------------------------------------------------------------LINK
---Logo----------main-navigation---------------------------------------Link

<div id="wrapper">
<header id="masthead" class="site-header" role="banner">
<div id="top-header">
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
</div>
<div id="bottom-header" class="row">
<div id="left-header" class="col-md-3">
<div class="logo">
<img src="<?php echo get_site_url().'/wp-content/themes/test-theme/img/logo.png'?>" alt=""/>
</div>
</div>
<div id="right-header" class="col-md-9">
<div class="main-navigation">
<?php wp_nav_menu('main-menu'); ?>
</div>
</div>
</div>
</header><!-- #masthead -->
<div id="content">
Content here
</div>
</wrapper>

Answer

wrap this html in one div with this class container-fluid

     <div id="wrapper">
                <header id="masthead" class="site-header" role="banner">
                    <div id="top-header">
                        <a href="#">1</a>
                        <a href="#">2</a>
                        <a href="#">3</a>
                    </div>
     <div class="container-fluid">
                    <div id="bottom-header" class="row">
                            <div id="left-header" class="col-md-3">
                                <div class="logo">
                                    <img src="<?php echo get_site_url().'/wp-content/themes/test-theme/img/logo.png'?>" alt=""/>
                                </div>
                            </div>
                            <div id="right-header" class="col-md-9">
                                <div class="main-navigation">
                                    <?php wp_nav_menu('main-menu'); ?>
                                </div>
                            </div>
                    </div>
</div>
                </header><!-- #masthead -->
        <div id="content">
            Content here
        </div>

    </div>