下のテキストの上にボタンを配置しようとしています。フロートレフトに関係していると思いますが、その後のコンテンツもフローティングしているため、フロートレフトが必要だと思います。
マージン: 0 自動; 動作していません。
お知らせ下さい：
.button {
background-color: rgb(214,52,49);
padding: 4px 24px;
border-radius: 40px 40px 40px 40px;
color: white;
text-decoration: none;
vertical-align: middle;
text-align: center;
font-size: 2rem;
display: block;
width: 150px; /* 150 / 980 */
}
nav {
width: 100%;
float: left;
margin: 0 0 1em 0;
padding: 0;
background-color: green;
border-bottom: 1px solid #ccc;
text-align: center;
vertical-align: text-top;
}
nav a.button {
float: left;
margin: 0 auto;
}
nav a.button:not(:first-child) {
margin-left: 150px;
}