Problem z poprawnym pozycjonowaniem elementów <video> w Bootstrapie

Question

Witajcie, 

 

Mam problem z pozycjonowaniem elementów wideo na stronie wykonanej w bootstrapie. Elementy powinny znajdować się jeden pod drugim. Ten warunek został spełniony. Problem polega na tym, że po pierwszym video, każde następne przesuwa się kilka pikseli w prawo. Próbowałem różnych sposobów rozwiązania tego problemu i nic nie pomaga. Wideo znajduje się w części zatytułowanej Photography prints w dolnej części strony, obok znajdują się elementy <h3> Rolling stones z Alicante, Cactus, Port Barcelona. Będę bardzo wdzięczny za wszelkie wskazówki, jak podejść do tego tematu. 

Link znajduje się tutaj

 

<div class="col-md-12">
  <div class="blog-entry ftco-animate d-md-flex">
    <video src="images/story_1569091556303.mp4" class="img-fluid" width="490" height="900" controls autoplay loop poster="images/poster1.jpg">
    </video>
                    <div class="mx-auto">
                       <h3 class="ml-5 pb-5">Rolling stones of Alicante</h3><br/>
                       <p class="mt-2 text-center font-weight-bold text-dark">Size: 30x40 Price -- 100 EUR</p>
                     <div class="container-fluid text-center">
                        <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
                        <input type="hidden" name="cmd" value="_s-xclick">
                        <input type="hidden" name="hosted_button_id" value="CSYMYVFL7ZVG2">
                        <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
                        <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
                        </form><br/><br/>
                     <div class="mx-auto">
                        <p class="text-center font-weight-bold text-dark">Size: 80x60 Price -- 250 EUR</p>
                     </div>
                       <div class="container-fluid text-center">
                          <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
                           <input type="hidden" name="cmd" value="_s-xclick">
                           <input type="hidden" name="hosted_button_id" value="LDQGNJ9D2G8WY">
                           <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
                           <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
                           </form>
                       </div>  
                     </div>
                    </div>
		</div>

 

Comments

Masz na stronie zagnieżdżone divy, każdy kolejny znajduje się w poprzednim.

Wyciągnij col-md-12 na zewnątrz i wszystko się wyrówna. Tak powinno to wyglądać:

Zamiast:

Answer 1

Dziękuję, zadziałało. Śmiga pięknie.