кнопка не меняет размер для мобильного устройства

Question

извинений. Сразу после некоторой помощи я не могу настроить кнопку по центру и правильно разместить ее на мобильном устройстве. У меня есть скрытый div, поэтому, когда вы нажимаете на кнопку, он появляется и, похоже, работает нормально. Я не думаю, что я хорошо структурирую CSS, поэтому любая помощь будет оценена. Спасибо.

HTML

<div class="container">
   <button type="button" data-toggle-page="#home" class="button">Home 
   designing</button>
</div>
<div id="home" class="page">
   <div class="section">
      <h2 class="kitchen">Kitchen</h2>
   </div>
   <div class="section">
      <h2><a style="text-decoration: none" href="Lounge">Lounge</a></h2>
   </div>
   <div class="section">
      <h2><a style="text-decoration: none" href="Dining">Dining room</a></h2>
   </div>
   <div class="section">
      <h2><a style="text-decoration: none" href="Hall">Hallway</a></h2>
   </div>
</div>

CSS

body {
    font-family: 'Montserrat', sans-serif;
    background: url(image.jpg) no-repeat center center;
    background-attachment: fixed;
    background-size: 100% 100%;
}

.container {
    text-align: center;
    max-width: 100%;
}

.button {
    background-color: rgba( 0, 0, 0, 0);
    /*    text-align: center;*/
    margin-top: 200px;
    font-size: 100px;
    color: #fff;
    font-family: 'Montserrat Subrayada', sans-serif;
    border: none;
    outline: none;
}

.page {
    position: absolute;
    visibility: hidden;
    pointer-events: none;
    text-align: center;
}
       

Answer 1

Вы можете центрировать элемент с помощью flexbox :

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  max-width: 100%;
}

align-items: center; будет центрироваться по вертикали.

justify-content: center; будет центрировано по горизонтали.