CSS кнопки застряли в нижней части страницы

Question

Я пытаюсь создать информационную панель для своего приложения, однако по какой-то причине созданные мной кнопки застряли в нижней части страницы, и независимо от того, сколько я работаю с полями и отступами, они никогда не перемещаются все. Я опубликую HTML и таблицу стилей ниже.

<header>
    <h1 class="logo">Logo</h1>
    <nav>
        <ul>
            <li><a href="#">Creation</a></li>
            <li><a href="#">Active Proxies</a></li>
            <li><a href="#">Tester</a></li>
            <li><a href="#">Settings</a></li>
        </ul>
    </nav>

</header>
<div class="content">
    <h2>Datacenter Providers</h2>
</div>

  <button class="btn btn1">AWS</button>
  <button class="btn btn2">Google</button>
  <button class="btn btn3">Linode</button>
  <button class="btn btn4">Digital Ocean</button>
  <button class="btn btn5">Vultr</button>
  <button class="btn btn6">Upcloud</button>

<style>@import url('https://fonts.googleapis.com/css?family=Work+Sans:300,600');


.btn{
  border:1px solid #FDB927;
  background: none;
  padding: 10px 20px;
  font-size: 20px;
  font-family: "montserrat";
  cursor: pointer;
  /*margin: 10px; */
  transition: .8;
  position: relative;
  overflow:hidden;
}
.btn1,.btn2,.btn3{
  color:#FDB927;
  margin-bottom: 1800px;
}


.btn::before{
  content: "";
  position:absolute;
  left:0;
  width:100px;
  height:0%;
  background:#552583;
  z-index: -1;
  transition: .8s;
}
.btn1::before,.btn2::before,.btn3::before{
  bottom:0;
  border-radius: 50% 50% 0 0;
}

.btn1:hover::before,.btn2:hover::before,.btn3:hover:before{
  height: 180%;
}

h2{
  color:white;
  margin-top: -1200px;
  margin-right: 1200px;
}

:root {
  --background: #552583;
}

*, *::before, *::after {
  box-sizing: border-box;
}

body {
    margin: 0;
    background: #222;
    font-family: 'Work Sans', sans-serif;
    font-weight: 400;
}

.content {
  height: 200vh;
  background-image: url(//unsplash.it/1000/1000);
  background-color: #000000;
  background-blend-mode: multiply;
  background-size: cover;
  display: grid;
  place-items: center;
}


header {
  background: var(--background);
  text-align: center;
  position: fixed;
  z-index: 999;
  width: 100%;
}




nav {
  position: absolute;
  text-align: left;
  top: 100%;
  left: 0;
  background: var(--background);
  width: 100%;
  transform: scale(1, 0);
  transform-origin: top;
  transition: transform 400ms ease-in-out;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  margin-bottom: 1em;
  margin-left: 1em;
}

nav a {
  color: white;
  text-decoration: none;
  font-size: 1.2rem;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 150ms ease-in-out;
}

nav a:hover {
  color:#FDB927;
}



@media screen and (min-width: 800px) {
  .nav-toggle-label {
    display: none;
  }

  header {
    display: grid;
    grid-template-columns: 1fr auto minmax(600px, 3fr) 1fr;
  }

  .logo {
    grid-column: 2 / 3;
  }

  nav {
     all: unset;
    position: relative;
    text-align: left;
    transition: none;
    transform: scale(1,1);
    background: none;
    top: initial;
    left: initial;

    grid-column: 3 4;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  nav ul {
    display: flex;
  }

  nav li {
    margin-left: 3em;
    margin-bottom: 0;
  }

  nav a {
    opacity: 1;
    position: relative;
  }

  nav a::before {
    content: '';
    display: block;
    height: 5px;
    background: black;
    position: absolute;
    top: -.75em;
    left: 0;
    right: 0;
    transform: scale(0, 1);
    transition: transform ease-in-out 250ms;
  }

  nav a:hover::before {
    transform: scale(1,1);
  }
}

</style>

Я пытаюсь выровнять кнопки прямо под заголовком с надписью «Поставщики центра обработки данных», но они застряли на этой серой полосе внизу. экрана. Первые 3 кнопки - единственные с какими-либо эффектами на них, я хотел выяснить выравнивание, прежде чем добавлять эффекты к другим 3.

Answer 1

Это происходит из-за того, что у вас есть div с height 200vh, иначе, 2 раза оконным браузером ;

.content {
  height: 200vh;
  background-image: url(//unsplash.it/1000/1000);
  background-color: #000000;
  background-blend-mode: multiply;
  background-size: cover;
  display: grid;
  place-items: center;
}

А ваши кнопки находятся внизу / внизу этого content, я представляю, что div с content class - это сама ваша страница, поэтому поместите все остальные элементы (например, кнопки) внутри этого div.

Answer 2

Просто поместите кнопки в тот же div, что и заголовок h2.

<div class="content">
    <h2>Datacenter Providers</h2>
  <button class="btn btn1">AWS</button>
  <button class="btn btn2">Google</button>
  <button class="btn btn3">Linode</button>
  <button class="btn btn4">Digital Ocean</button>
  <button class="btn btn5">Vultr</button>
  <button class="btn btn6">Upcloud</button>
</div>

Вероятно, это хорошая идея, чтобы они были в отдельном контейнере.

<div class="content">
    <h2>Datacenter Providers</h2>
    <div class="buttons>

     <button class="btn btn1">AWS</button>
     <button class="btn btn2">Google</button>
     <button class="btn btn3">Linode</button>
     <button class="btn btn4">Digital Ocean</button>
     <button class="btn btn5">Vultr</button>
     <button class="btn btn6">Upcloud</button>
   </div>
</div>