How to move the navigation bar to the top of the page - html

Question

My navigation does not seem to want to move to the top of the page. this is how it currently looks like: http://i.stack.imgur.com/9kjc5.png
I tried to add margin-top: 0px, but it does not seem to work. I took the example from http://jsfiddle.net/jusuchyne/tupxwyqe/. Here's my html code:
<div class="row nav1">
<nav class="navbar navbar-inverse" id="top-menu" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-target="#navbarCollapse" data-toggle="collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collapse navigation -->
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="nav navbar-nav">
<li class="active">HOME</li>
<li>MEN</li>
<li>WOMEN</li>
<li>KIDS</li>
<li>ACCESSORIES</li>
<li>FOOTWEAR</li>
<li>COSMETICS</li>
<li>YOUR ACCOUNT</li>
</ul>
<!-- Search box -->
<form class="navbar-form navbar-right">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
<div class="input-group-btn">
<button class="btn btn-info" type="submit">
<i class="glyphicon glyphicon-search"></i>
</button>
</div>
</div>
</form>
</div>
</div>
<!-- End container-fluid -->
</nav>
<!-- End navbar-inverse -->
</div>
And here's the css:
.navbar {
margin: 15px;
font-family: 'Raleway', sans-serif;
background: #444444;
}
.navbar-inverse .navbar-nav > .active > a {
background: #000000;
}
.navbar-inverse .navbar-nav > li > a {
color: #F2DEDE;
}
#move_to_top {
top: 0px;
}

Answer 1

.navbar.navbar-inverse {
font-family: 'Raleway', sans-serif;
background: #444444;
}
.navbar.navbar-inverse .navbar-nav>.active>a {
background: #000000;
}
.navbar.navbar-inverse .navbar-nav > li > a {
color: #F2DEDE;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<div class="nav1">
<nav class="navbar navbar-inverse navbar-static-top" id="top-menu" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-target="#navbarCollapse" data-toggle="collapse"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collapse navigation -->
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="nav navbar-nav">
<li class="active"> HOME
</li>
<li> MEN
</li>
<li> WOMEN
</li>
<li> KIDS
</li>
<li> ACCESSORIES
</li>
<li> FOOTWEAR
</li>
<li> COSMETICS
</li>
<li> YOUR ACCOUNT
</li>
<!-- <li class="dropdown">
More<b class="caret"></b>
<ul class="dropdown-menu">
<li>
Example1
</li>
</ul>
</li>
-->
</ul>
<!-- Search box -->
<form class="navbar-form navbar-right">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
<div class="input-group-btn">
<button class="btn btn-info" type="submit"> <i class="glyphicon glyphicon-search"></i>
</button>
</div>
</div>
</form>
</div>
</div>
<!-- End container-fluid -->
</nav>
<!-- End navbar-inverse -->
</div>
Remove .row from your first line. It's completely unnecessary. See the docs and the margin you've added of 15px.