Question: i m trying to keep Hello as a heading below nav tag. 
This is my HTML.

```
<nav class="navbar navbar-default navbar-fixed-top" style="background-color: aliceblue;" role="navigation">
<div class="container-fluid">
    <div class="navbar-header">
        <img class="img-responsive" src="img/logo.png" style="width: 330px; height: 49px;" />
    </div>
    <ul class="nav navbar-nav navbar-right" id="navbarprop">
        <li id="home" class="active">
            <a class="color" href="#"><i class="glyphicon glyphicon-home"></i>&nbsp Home</a>
        </li>              
    </ul>
</div>
</nav>
<div class="container">
<h1>HELLO</h1>
</div>

```

I want to make my page responsive. The problem arise is the Hello is printed inside the nav tag. i have to apply margin-top:50px; to make "HELLO" visible. How do i make it responsive. 
This is the image with no margin top
<http://imgur.com/q5yol6t>
Hello is inside the nav.
This is the image with margin top
<http://imgur.com/j8tjUbZ>
Thank You in advance!

Answer: 
<http://getbootstrap.com/components/#navbar-fixed-top>

Look particularly at the part where it says the body requires padding.

> 
> The fixed navbar will overlay your other content, unless you add padding to the top of the `<body>`. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.
> 
> 
> 

```
body { padding-top: 70px; }

```

> 
> Make sure to include this after the core Bootstrap CSS.
> 
> 
>
You can solve this with media screen, just give another margin top for screens less than 767px(except tablet,laptop and desktop)
Hope it will help you.

```
<style>
body
{
    background-color:#4FE1A8;
}
 #wrapper
 {
     margin-top:50px;
 }
 @media screen and (max-width:767px)
 {
     #wrapper
 {
     margin-top:100px;
 }
 }
</style>
<nav class="navbar navbar-default navbar-fixed-top" style="background-color: aliceblue;" role="navigation">
<div class="container-fluid">
    <div class="navbar-header">
        <img class="img-responsive" src="img/logo.png" style="width: 330px; height: 49px;" />
    </div>
    <ul class="nav navbar-nav navbar-right" id="navbarprop">
        <li id="home" class="active">
            <a class="color" href="#"><i class="glyphicon glyphicon-home"></i>&nbsp Home</a>
        </li>              
    </ul>
</div>
</nav>
<div class="container" id="wrapper">
<h1>HELLO</h1>
</div>

```