**Fiddle** to understand better

**<http://jsfiddle.net/fctqp5bt/8/>**

I have 3 columns in my website page.

First Column for the Navigation Bar.

Second Column for the arrow glyphicon.

Third Column for the Panel.

But, the glyphicon and panel are not aligned. What is the issue here?

![enter image description here](https://i.stack.imgur.com/L8Hil.png)

The code:

HTML:

```
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Subham Soni</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]--> 
  </head>
  <body>
    <div class="page-header head" id="header">
    <div class="hbg"></div>
    <h1 style="padding-top:10px;padding-left:10px;font-family:'Whiteboard Modern Demo','Arial';"><center>Subham Soni</center></h1>
    <p id="import"><span style="color:rgb(190,0,255);">import</span> java.subhamsoni.*;</p>
    <p id="include"><span style="color:rgb(190,0,255);">#include</span>&nbsp;<span style="color:rgb(255,0,255);">&lt;subhamsoni.h&gt;</span></p>
    <p id="echo"><span style="color:rgb(92,51,23);">echo</span>&nbsp;<span style="color:rgb(255,0,255);">'Subham Soni'</span></p>
    </div>
    <div class="container-fluid" id="maincontent">
    <div class="row">
        <div class="col-md-2 menu">
                <ul class="nav nav-pills nav-stacked">
              <li class="active"><a href="#">About Me</a></li>
  <li><a href="#">Education</a></li>
  <li><a href="#">Projects</a></li>
                </ul>
                </div>
                <div class="col-md-0 content">
                <span class="glyphicon glyphicon-hand-right"></span>
                </div>
        <div class="col-md-8">
                <div class="panel panel-default">
            <div class="panel-heading">
                    <h3 class="panel-title">About Me</h3>
            </div>
        <div class="panel-body">
                 Panel content
        </div>
                </div>
                </div>
    </div>
    </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

```

style.css

```
.head{
position: relative;
z-index: 1;
margin-top:10px;
height: 170px;
}

.head .hbg
{
position: absolute;
top: 0px;
left: 0px;
background: url('hbg.png');
background-size: 100% 100%;
opacity: 0.3;
width: 100%;
height: 100%;
z-index: -1;
}

#include
{
font-size: 20px;
font-weight: bold;
position: relative;
left: 29%;
top: -38%;
}

#import
{
font-size: 30px;
font-weight: bold;
position: relative;
left: 65%;
top: -20%;
display:block;
transform: rotate(-8deg); 
}

#echo
{
font-weight: bold;
font-size: 20px;
position: relative;
top: -25%;
left: 12%;
}

```