html - 无法移动文本按钮

Question

我正在创建一个带有标题背景图像的菜单。现在我创建了一个文本按钮(绿色的 Aphryv 东西)但我无法移动它。我试过了:边距、文本对齐。你可以看到盒子现在是什么，我是否想要它。

我的代码:

.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 a {
    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>

Answer 1

问题是代码:

display: inline-block;

你需要移除它，给文本一个宽度，然后使用边距来定位它。

例子: https://jsfiddle.net/nc5jfd2c/