<div class="row">
<nav id="topNav" class="navbar fixed-top navbar-toggleable-sm navbar-inverse bg-inverse">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target=".navbar-collapse">
        ☰
    </button>
    <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#">Notes</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">About</a>
            </li>
        </ul>
    </div>
    <a class="navbar-brand mx-auto" href="#"><img src="assets/img/logo.png" alt="Dark Note Logo" class="logo"></a>
    <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav ml-auto">
            <li class="nav-item">
                <a class="nav-link" href="#">Founder</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Contact</a>
            </li>
        </ul>
    </div>
</nav>
</div>
<div class="row note-row">
    <textarea rows="4" cols="50" placeholder="Type note here..." class="col-lg-10 col-md-10 col-sm-12 col-xs-12 notes" id="main_panel"></textarea>
</div>

body {
    background-image: url("../img/curls.png");
}
#main_panel {
    margin: 0 auto;
    margin-top: 20px;
    height: 50em;
    display: block;
    margin-top: 90px;
}
.note-row {
    margin-left: 0;
    margin-right: 0;
}

.logo {
    height: 50px;
}
.notes {
    background-attachment: local;
    background-image:
        linear-gradient(to right, white 10px, transparent 10px),
        linear-gradient(to left, white 10px, transparent 10px),
        repeating-linear-gradient(white, white 30px, #ccc 30px, #ccc 31px, white 31px);
    line-height: 31px;
    padding: 8px 10px;
}