html - Can't move text button -


i'm creating menu header background image. created text button (the green aphryv thing) can't move it. tried: margin, text-align. can see box , want it. enter image description here

my code :

.full-header {      width: 100%;      height: 500px;      background: url(img/header-bg.jpg) no-repeat center center fixed;       -webkit-background-size: cover;      -moz-background-size: cover;      -o-background-size: cover;      background-size: cover;  }        .header {      width: 100%;      height: 60px;      background: rgba(0, 0, 0, 0.45);  }        .nav {      text-align: center;  }        .nav ul li {      display: inline;      padding: 20px 10px;      line-height: 55px;  }        .nav ul li {      text-decoration: none;      color: #fff;      font-family: 'source sans pro', arial, sans-serif;      font-size: 35px;  }        .button {      font-family: arial;      color: #ffffff;      font-size: 30px;      background: #8edd63;      padding: 10px 20px 10px 20px;      text-decoration: none;      display: inline-block;      text-align: center;  }
<div class="full-header">      <div class="header">          <div class="nav">      	    <ul>                 <li><a href="#">home</a></li>                 <li><a href="#">work</a></li>                 <li><a href="#">about me</a></li>                 <li><a href="#">contact</a></li>             </ul>         </div>      </div>      <div class="button">aphryv</div>  </div>

the problem code:

display: inline-block; 

you need remove it, give text width, , use margins position it.

example: https://jsfiddle.net/nc5jfd2c/


Comments

Popular posts from this blog

c# - Better 64-bit byte array hash -

webrtc - Which ICE candidate am I using and why? -

php - Zend Framework / Skeleton-Application / Composer install issue -