    <!-- Intro Header -->
    <header class="intro">
        <div class="intro-body">
            <div class="container">
                <div class="row">
                    <div class="col-md-8 col-md-offset-2">
                        <img src="{{ site.baseurl }}/img/nav_logo.png" height="200px" style="margin-bottom: 35px"/>
                        <p class="intro-text">{{ site.description }}<br>
                        <a href="#about" class="btn btn-circle page-scroll">
                            <i class="fa fa-angle-double-down animated"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <!-- Intro Header -->
    <header class="intro">
        <div class="intro-body">
            <div class="container">
                <div class="row">
                    <div class="col-md-8 col-md-offset-2">
                        <img src="{{ site.baseurl }}/img/nav_logo.png" width="100%" style="padding-bottom: 5%"/>
                        <p class="intro-text">{{ site.description }}<br>
                        <a href="#about" class="btn btn-circle page-scroll">
                            <i class="fa fa-angle-double-down animated"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </header>

Fix brand logo on mobile devices
Fix brand logo on mobile devices

200px height is too large for some screen sizes. Thus set the width to 100% to use all the space available in the container without overflowing.
