При масштабировании окна одна кнопка заезжает под другую

Question

При масштабировании окна одна кнопка заезжает под другую. Как задать минимальное расстояние между кнопками?

aside {
    
}

aside button {
    height: 50px;
    width:  50px;
}

#search {
    
}

#installed {
    float: right;
}

#snap {
    
}

#flatpack {
    align: left;
    vertical-align: middle;
    top: 50%;
    position: absolute;
    transform: translateY(-50%);
}

#appimage {
    align: left;
    vertical-align: bottom;
    top: 100%;
    position: absolute;
    transform: translateY(-100%);
    margin-bottom: 500px;
}

#software-sources {
    margin-top: 20%;
    min-height: 300px;
    max-width: 100px;
    position: relative;
}

#top {
    margin-left: 30%;
    margin-right: 30%;
}

#top button {
    width: 200px;
}

<html>
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <link rel="stylesheet" href="style.css">
    <title>App</title>
  </head>
  <body>
    <div id="top">
      <span><button id="search">Search</button></span>
      <span><button id="installed">Installed</button></span>
    </div>
    <aside id="software-sources">
      <div id="snap"><button>Snap</button></div>
      <div id="flatpack"><button>Flatpack</button></div>
      <div id="appimage"><button>Appimage</button></div>
    </aside>
  </body>
</html>

Answer 1

Добавил

  display: flex;
  justify-content: center;

для дива с ид top

aside button {
  height: 50px;
  width: 50px;
}

#search {}

#installed {
  float: right;
}

#snap {}

#flatpack {
  align: left;
  vertical-align: middle;
  top: 50%;
  position: absolute;
  transform: translateY(-50%);
}

#appimage {
  align: left;
  vertical-align: bottom;
  top: 100%;
  position: absolute;
  transform: translateY(-100%);
  margin-bottom: 500px;
}

#software-sources {
  margin-top: 20%;
  min-height: 300px;
  max-width: 100px;
  position: relative;
}

#top {
  margin-left: 30%;
  margin-right: 30%;
  display: flex;
  justify-content: center;
}

#top button {
  width: 200px;
}

<body>
  <div id="top">
    <span><button id="search">Search</button></span>
    <span><button id="installed">Installed</button></span>
  </div>
  <aside id="software-sources">
    <div id="snap"><button>Snap</button></div>
    <div id="flatpack"><button>Flatpack</button></div>
    <div id="appimage"><button>Appimage</button></div>
  </aside>
</body>

БЛОГ НА HUSL

При масштабировании окна одна кнопка заезжает под другую

Ответы (1 шт):