I am trying to make a responsive website with the help of Bootstrap, everything good for untill I have 3 buttons on desktop who are in a row and when I want to go to mobile resolution I want them to be verticaly aligned one on the top of eachother ( this work but the problem is the aligment )
i attached a photo with the problem and my html and css code, please be kind I am new in bootstrap and webdev :)
[![enter image description here](https://i.stack.imgur.com/gJ2VJ.png)](https://i.stack.imgur.com/gJ2VJ.png)

```css
body {
  background-color: black;
  background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("../Bloc\ Nisipari/View03.jpg") no-repeat center center fixed;
  -webkit-background-size: cover;
  /* For WebKit*/
  -moz-background-size: cover;
  /* Mozilla*/
  -o-background-size: cover;
  /* Opera*/
  background-size: cover;
  /* Generic*/
}

.container {
  color: white;
  font-family: 'montserrat';
  src: url("../Montserrat/Montserrat-Italic-VariableFont_wght.ttf");
  margin-top: 200px;
}

.img {
  width: 500px;
}

.textlogo {
  width: 400px;
}

.btn {
  --bs-btn-border-color: transparent;
  --bs-btn-border-width: none;
}

.btn-1 {
  width: 200px;
  height: 60px;
  border: none;
  color: rgb(255, 255, 255);
  font-size: 32px;
  transition: ease-out 0.3s;
  background-color: transparent;
  outline: none;
  position: relative;
  z-index: 1;
  font-family: 'montserrat';
  src: url("../Montserrat/Montserrat-Italic-VariableFont_wght.ttf")
}

.btn-1:hover {
  color: rgb(0, 0, 0);
  cursor: pointer;
  text-decoration: none;
}

.btn-1:before {
  transition: 0.5s all ease;
  position: absolute;
  top: 0;
  left: 150%;
  right: 150%;
  bottom: 0;
  opacity: 0;
  content: "";
  background-color: #ffffff;
}

.btn-1:hover::before {
  transition: 0.5 all ease;
  left: 0;
  right: 0;
  opacity: 1;
  z-index: -1;
}

.btn-2 {
  width: 200px;
  height: 60px;
  border: none;
  color: rgb(255, 255, 255);
  font-size: 32px;
  transition: ease-out 0.3s;
  background-color: transparent;
  outline: none;
  position: relative;
  z-index: 1;
  font-family: 'montserrat';
  src: url("../Montserrat/Montserrat-Italic-VariableFont_wght.ttf")
}

.btn-2:hover {
  color: rgb(0, 0, 0);
  cursor: pointer;
  text-decoration: none;
}

.btn-2:before {
  transition: 0.5s all ease;
  position: absolute;
  top: 0;
  left: 150%;
  right: 150%;
  bottom: 0;
  opacity: 0;
  content: "";
  background-color: #ffffff;
}

.btn-2:hover::before {
  transition: 0.5 all ease;
  left: 0;
  right: 0;
  opacity: 1;
  z-index: -1;
}

.btn-3 {
  width: 200px;
  height: 60px;
  border: none;
  color: rgb(255, 255, 255);
  font-size: 32px;
  transition: ease-out 0.3s;
  background-color: transparent;
  outline: none;
  position: relative;
  z-index: 1;
  font-family: 'montserrat';
  src: url("../Montserrat/Montserrat-Italic-VariableFont_wght.ttf")
}

.btn-3:hover {
  color: rgb(0, 0, 0);
  cursor: pointer;
  text-decoration: none;
}

.btn-3:before {
  transition: 0.5s all ease;
  position: absolute;
  top: 0;
  left: 50%;
  right: 50%;
  bottom: 0;
  opacity: 0;
  content: "";
  background-color: #ffffff;
}

.btn-3:hover::before {
  transition: 0.5 all ease;
  left: 0;
  right: -15%;
  opacity: 1;
  z-index: -1;
}

@media only screen and (max-width: 900px) {
  .container {
    color: white;
    font-family: 'montserrat';
    src: url("../Montserrat/Montserrat-Italic-VariableFont_wght.ttf");
    margin-top: 100px;
  }
  .text-center {
    display: block;
    text-align: center;
  }
}
```

```html
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Home- Studio Art Construct</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
  <link rel="stylesheet" href="prehomepage.css">
</head>
<div class="container">
  <img src="../site bootstrap/image/logo.png" class="img">
  <div class="textlogo"> "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."

  </div>
</div>

<div class="container btn">

  <button type="button" class="btn-1">constructii </button>
  <button type="button" class="btn-2">proiecte</button>
  <button type="button" class="btn-3">infrastructura</button>

</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
</body>

</html>
```