html - Proper text align with absolute position -

very simple thing, i've got lost in ..

i have square inside of heading , paragraph. need simple align paragraph right under heading, misterious reason there still space blocks me proper aligning. i'm using absolute positioning can see in code below.

thank soo me off this! :)

scss

.wrapper-logo {     position: absolute;     border: 2px solid #fff;     width: 230px;     height: 230px;     top: 24%;     left: 60%;      .header-logo {         background-image:url(../img/header.png);         background-repeat: no-repeat;         background-position: center;         background-size: cover;         width: 210px;         height: 210px;         margin: 8px;         border: 0;          h1 {             margin: 0!important;             padding: 80px 0 0;             vertical-align: middle;             text-align: center;             text-transform: uppercase;             font-size: 220%;             letter-spacing: 3px;             color: $dark;             font-weight: 500;         }          p {             margin: 0!important;             text-align: center;             text-transform: uppercase;             letter-spacing: 3px;             word-spacing: 2px;             color: $grey;             line-height: 0px;         }     } }   

html

<div class="wrapper-logo">     <div class="header-logo">         <h1>my heading</h1><br>         <p>my paragraph</p>     </div> </div> 

try removing <br> tag. i've set jsbin take @ here:

http://jsbin.com/jehijumayi/edit?html,css,output