JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<body>
    <article class="container">
        <p>Look my width has stayed at 970px :-)</p>
        <p>but my content still re flows,</p>
        <p>i want the content on the desktop to stay the same full screen as it is when the window is resize.</p>
        <header id="header">
            <div class="row">
                <div class="col-sm-4 col-sm-push-4 center">
                    <img src="http://placekitten.com/g/200/300" />
                </div>
                <nav class="col-sm-4 col-sm-pull-4">
                    <ul id="leftNav" class="top-nav">
                        <li> <a class="active" href="">HOME</a>

                        </li>
                        <li> <a href="">
                                ABOUT
                            </a>

                        </li>
                        <li> <a href="">
                                sdfdf
                            </a>

                        </li>
                    </ul>
                </nav>
                <nav class="col-sm-4">
                    <ul id="leftNav" class="top-nav">
                        <li> <a href="">NEWS</a>

                        </li>
                        <li> <a href="">
                                STORE
                                <p>COMING SOON</p>
                            </a>

                        </li>
                        <li> <a href="">
                                CONTACT US
                            </a>

                        </li>
                    </ul>
                </nav>
            </div>
            <div class="row quotes">
                <div class="col-sm-4"></div>
                <div class="col-sm-4 col-sm-offset-4"></div>
            </div>
        </header>
    </article>
</body>

CSS

body {
    background:#333;
}
.row {
    text-align: center
}
.container {
    background: #fff;
    padding: 0;
}
.center {
    text-align: center
}
.top-nav {
    padding: 0;
    text-align: left;
    display: inline-block;
    margin-bottom: 0;
}
.top-nav li {
    display: block
}
.top-nav li a {
    font-size: 17px;
    display: inline;
    color: #000;
}
.top-nav li a p {
    display: inline;
    font-size: 13px;
}
.top-nav li a p:before {
    content:"-  "
}

JavaScript

var d = document,
    h = d.getElementsByTagName('head')[0],
    b = d.getElementsByTagName('body')[0];
var desktop = screen.availWidth >= '768';
if (desktop) {


    var css = ".container{max-width: none !important;width:970px;}",
        head = document.getElementsByTagName('head')[0],
        style = document.createElement('style');

    style.type = 'text/css';
    if (style.styleSheet) {
        style.styleSheet.cssText = css;
    } else {
        style.appendChild(document.createTextNode(css));
    }

    head.appendChild(style);



}