bootstrap 3 full width image and div in container

Question

I'm trying to set some divs to width: 100% on Twitter Bootstrap 3 (including no paddings or margins).

JSfiddle: http://jsfiddle.net/rq9ycjcx/

HTML:

<div class="container">
    <header>
        <div class="row">
            <div class="col-md-2">
                <img src="http://placehold.it/150x50">
            </div>
            <div class="col-md-10">Menu</div>
        </div>
        <div class="row gray">
            <div class="col-md-6">
            <h1>Page Title</h1>
            </div>
            <div class="col-md-6">
                <div class="breadcrumbs">Main page > page </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
            <img src="http://placehold.it/350x150" />
            </div>    
        </div>    
    </header>

    <footer>
    <div class="row">
        <div class="col-md-12">Content</div>
    </div>
    <div class="row dark">
        <div class="col-md-3">Footer 1</div>
        <div class="col-md-3">Footer 2</div>
        <div class="col-md-3">Footer 3</div>
        <div class="col-md-3">Footer 4</div>
    </div>
    </footer>    
</div>

1. What is the right way to get image http://placehold.it/350x150 width: 100%, including no paddings or margins?

2. Page title and breadcrumbs height is 80px.
   If I resize window to smaller screen (e.g. mobile), text Main page > page disappears (it's somewhere but not on own row). How to fix it?

Answer 1

Use <div class="container-fluid">. As per Bootstrap Docs: Use .container-fluid for a full width container, spanning the entire width of your viewport.

There is 0 padding on container-fluid.

In your code you have what appears to be body content in your header and you also have a div class="container" outside of your header and footer. This is not correct, you should have your container/container-fluid inside of your body. Also for your header you should use <nav="nav navbar-nav">.

Updated Fiddle