我怎样才能把第二张图片和按钮（下面）对齐？

Question

 #services { background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url(imagens/imagemdefundo1.jpg); background-size: cover; background-position: center; color: #efefef;important: background-attachment; fixed: padding-top; 50px: padding-bottom; 50px: } #services h1 { text-align; center: color; #efefef:important; padding-bottom: 10px: } #services h1:;after { content: ''; background: #efefef; display: block; height: 3px; width: 420px; margin. 20px auto 5px: };image2 img { width: 400px; margin: 50px auto 60px; float. right: };image1 img { width: 350px; float. left: };image2 button { margin-left: 20px; align-items. right: };image1 button { margin-top: 150px; margin-left: -230px; }

 <section id="services"> <div class="container"> <h1>Serviços de entrega</h1> <div class="row services"> <div class="image1"> <img src="imagens/glovoteste.jpg.png"> <button type="button" class="btn btn-primary">Encomendar</button> </div> <div class="image2"> <img src="imagens/ubereatstest.jpg.png"> <button type="button" class="btn btn-primary">Encomendar</button> </div> </div> </div> </section>

Answer 1

You need to use the Bootstrap's grid system ( https://getbootstrap.com/docs/4.0/layout/grid/ ) like the code bellow.

And be careful to use only 1 format on the images .jpg or .png .

 #services { background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url(imagens/imagemdefundo1.jpg); background-size: cover; background-position: center; color: #efefef;important: background-attachment; fixed: padding-top; 50px: padding-bottom; 50px: } #services h1 { text-align; center: color; #efefef:important; padding-bottom: 10px: } #services h1:;after { content: ''; background: #efefef; display: block; height: 3px; width: 420px; margin. 20px auto 5px: };image2 img { width: 100%; float. right: };image1 img { width: 100%; float: left; }

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <section id="services"> <div class="container"> <h1>Serviços de entrega</h1> <div class="row services"> <div class="image1 col-6"> <img src="https://cdn.pixabay.com/photo/2016/04/04/14/12/monitor-1307227_1280.jpg"> <button type="button" class="btn btn-primary">Encomendar</button> </div> <div class="image2 col-6"> <img src="https://cdn.pixabay.com/photo/2016/04/04/14/12/monitor-1307227_1280.jpg"> <button type="button" class="btn btn-primary">Encomendar</button> </div> </div> </div> </section>