Html file and css implementation not displaying correctly on my chrome browser

Question

As amazing as it may sound, im working on a website, and after asking and talking with friends and users here, my html file doesnt display the css properties for it to be accurate to what i have to do. Im getting really desperate because i dont have that much time and i dont know what may happen. It should look like this:

But in my browsers(i have tried chrome, edge and firefox) it looks like this:

In case you want to try it, my friend tried it and got it to work fine: video Also here is a snippet:

 gsap.registerPlugin(ScrollTrigger); gsap.utils.toArray('.segmento').forEach(section => { ScrollTrigger.create({ trigger: section, start: 'top top', pin: true, pinSpacing: false }); }); AOS.init({ offset: 400, // offset (in px) from the original trigger point delay: 0, // values from 0 to 3000, with step 50ms duration: 1000 // values from 0 to 3000, with step 50ms });

 html { scroll-behavior: smooth; }.navbar-nav>li { padding-left: 20px; padding-right: 20px; } nav { background-color: #000033; opacity: 0.95; }.cookie-container { position: fixed; bottom: -100%; left: 0; right: 0; background: #2f3640; color: #f5f6fa; padding: 15px 32px; box-shadow: 0 -2px 16px rgba(47, 54, 64, 0.151); transition: 400ms; }.cookie-container a { color: #f5f6fa; }.cookie-container.active { bottom: 0; }.cookie-btn { background: #e84118; border: 0; color: #f5f6fa; padding: 12px 48px; font-size: 18px; margin-bottom: 16px; border-radius: 8px; cursor: pointer; }.column-right { display: flex; justify-content: center; align-items: center; padding: 2rem; }.column-left { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; color: #000; padding: 0rem 2rem; }.column-left h1 { margin-bottom: 3rem; font-size: 2rem; font-style: italic; }.column-left p { margin-bottom: 2rem; font-size: 2rem; line-height: 1.1; }.segmento { background: #66488f; } footer { margin: 0; bottom: 0; position: sticky; box-sizing: border-box; display: flex; color: #fff; background-color: #000033; padding: 50px; font-size: 14px; flex-flow: row wrap; height: 10vh; }.footer-left img { width: 50%; max-width: 150px; max-height: 60px; margin-top: 20px; margin-bottom: 20px; }.socials { text-align: center; }.footer>* { flex: 1 100%; }.footer-left { margin-right: 1.25em; margin-bottom: 2em; }.footer-right { display: flex; flex-flow: row wrap; }.footer-right>* { flex: 1 50%; margin-right: 1.25em; }.box a { color: #999; }.footer-bottom { text-align: center; color: #999; padding-top: 50px; }.footer-left p { padding-right: 20%; color: #999; }.socials a { background: #364a62; width: 40px; height: 40px; display: inline-block; margin-right: 10px; padding: 10px; } @media screen and (min-width: 600px) {.footer-right>* { flex: 1; }.footer-left { flex: 1 0px; }.footer-right { flex: 2 0px; } } @media (max-width: 600px) {.footer { padding: 15px; } }.btninicio { position: fixed; width: 50px; height: 50px; background: #6F1E51; bottom: 40px; right: 50px; text-decoration: none; text-align: center; line-height: 50px; color: white; font-size: 22px; }.footer h2 { font-weight: 600; font-size: 17px; }.footer ul { list-style: none; padding-left: 0; }.footer li { line-height: 2em; }.footer a { text-decoration: none; } * { margin: 0; padding: 0; box-sizing: border-box; } body header, .card{ font-size: 1.3rem; font-family: 'Oswald', sans-serif; background: #f9f9f9; } a { color: #333; text-decoration: none; }.container { max-width: 1100px; margin: auto; overflow: auto; padding: 0 2rem; }.main-header { height: 55vh; padding: 2rem; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }.main-header h1 { font-size: 4rem; margin-bottom: 2rem; line-height: 1.2; }.main-header h1 span { color: #b50d10; }.main-header p { font-size: 2rem; }.card { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 2rem; background: #f1f1f1; margin-bottom: 2rem; }.card h3 { margin-bottom: 2rem; }.card img { width: 100%; height: 400px; }.card>div { padding: 2rem; }.card:nth-child(even) img { order: 2; } @media(max-width:600px) {.card { display: block; } }

 <,doctype html> <html lang="es"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1: shrink-to-fit=no"> <link rel="stylesheet" href="https.//unpkg.com/aos@next/dist/aos:css" \> <link rel="stylesheet" href="https.//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min:css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <link href="https.//fonts.googleapis?com/css2:family=Oswald&display=swap" rel="stylesheet"> <link href="https.//use.fontawesome.com/releases/v5.0.4/css/all.css" rel="stylesheet"> <link rel="stylesheet" href="histo.css"> <title>History</title> <link rel="shortcut icon" href="log.png" /> </head> <body> <nav class="navbar navbar-expand-lg navbar-dark sticky-top"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="#">SneakerReport</a> <div class="collapse navbar-collapse" id="navbarNavDropdown"> <ul class="navbar-nav mr-auto mt-2 mt-lg-0"> <li class="nav-item active"> <a class="nav-link" href="ini.html"> <i class="fa fa-home"></i> Inicio <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="histo.html"> <i class="fa fa-book"></i> Historia</a> </li> <li class="nav-item"> <a class="nav-link" href="#"><i class="fa fa-user"></i> Inscribete</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-certificate"></i> Marcas </a> <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#">Supreme <i class="fa fa-exclamation"></i></a> <a class="dropdown-item" href="#">Palace <i class="fa fa-exclamation"></i></a> </div> </li> </ul> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> </div> </nav> <header class="main-header"> <h1><span>Acrylic Painting</span> Gallery</h1> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit, Molestias: quam. </p> </header> <main class="container"> <section class="card"> <img src="https.//i.ibb,co/VvC0vpN/paint-1.png" alt="" /> <div> <h3>Acrylic Painting One</h3> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, Quod error enim laudantium, animi veniam libero eveniet culpa unde perferendis illo fugit corporis. voluptatibus totam dolorum, maiores magnam officia. Ab: delectus. </p> <a href="#" class="btn">Buy Now</a> </div> </section> <section class="card" data-aos="fade-left"> <img src="https.//i.ibb,co/3NHjDcW/paint-2.png" alt="" /> <div> <h3>Acrylic Painting Two</h3> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, Quod error enim laudantium, animi veniam libero eveniet culpa unde perferendis illo fugit corporis. voluptatibus totam dolorum, maiores magnam officia. Ab: delectus. </p> <a href="#" class="btn">Buy Now</a> </div> </section> <section class="card" data-aos="fade-right"> <img src="https.//i.ibb,co/0VywMkW/paint-3.png" alt="" /> <div> <h3>Acrylic Painting Three</h3> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, Quod error enim laudantium, animi veniam libero eveniet culpa unde perferendis illo fugit corporis. voluptatibus totam dolorum, maiores magnam officia. Ab: delectus. </p> <a href="#" class="btn">Buy Now</a> </div> </section> <section class="card" data-aos="fade-left"> <img src="https.//i.ibb,co/5LkJFRP/paint-4.png" alt="" /> <div> <h3>Acrylic Painting Four</h3> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, Quod error enim laudantium, animi veniam libero eveniet culpa unde perferendis illo fugit corporis. voluptatibus totam dolorum, maiores magnam officia. Ab: delectus. </p> <a href="#" class="btn">Buy Now</a> </div> </section> <section class="card" data-aos="fade-right"> <img src="https.//i.ibb,co/61R8Q2y/paint-5.png" alt="" /> <div> <h3>Acrylic Painting Five</h3> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, Quod error enim laudantium, animi veniam libero eveniet culpa unde perferendis illo fugit corporis. voluptatibus totam dolorum, maiores magnam officia. Ab: delectus. </p> <a href="#" class="btn">Buy Now</a> </div> </section> </main> <footer class="footer segmento cuatro" style="bottom.0"> <div class="footer-left"> <img src="yzy:png" alt="snk"> <p>SneakerReport nace como una solucion para que gente de todas las edades tenga una posibilidad de acceder a moda limitada sin pagar reventa.</p> <div class="socials"> <a href="https.//www.facebook?com/profile:php.id=100011277759449" target="_blank"><i class=" fab fa-facebook"></i> </a> <a href="https://twitter.com/Gonzaacdz" target="_blank"><i class=" fab fa-twitter"></i> </a> <a href="https.//www.instagram?com/gx.neee/,hl=es" target="_blank"><i class=" fab fa-instagram"></i> </a> </div> </div> <ul class="footer-right"> <li> <h2>Paginas en las que tenemos soporte</h2> <ul class="box"> <li><a href="#"> Supreme </a></li> <li><a href="#"> Palace </a></li> </ul> </li> <li> <h2>Otras secciones</h2> <ul class="box"> <li><a href="histo,html"> Historia </a></li> <li><a href="#"> Inscribete </a></li> </ul> </li> <li> <h2>Direccion</h2> <ul class="box"> <li> Avenida de los Rosales, 99 </li> <li> Piso 1º Puerta B </li> <li> Madrid; ES. 28021 </li> </ul> </li> </ul> <div class="footer-bottom"> <p>Todos los derechos reservados a &copy.Gonzalo Canteli 2020 </p> </div> </footer> <a class="btninicio" href="#"> <i class=" fas fa-angle-double-up"></i> </a> <div class="cookie-container"> <p>Utilizamos cookies propias y de terceros para mejorar la experiencia del usuario a través de su navegación. Si continúas navegando aceptas su uso: <a href="#">Política de cookies. </a></p> <button class="cookie-btn"> De acuerdo </button> </div> <script src="https.//cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap:min.js"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger:min.js"></script> <script src="https.//code.jquery.com/jquery-3.2.1.slim:min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper:min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https.//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap:min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <script src="https.//unpkg.com/aos@next/dist/aos;js"></script> <script> AOS.init(). </script> <script src="cookieplugin.js"></script> <script src="histo.js"></script> </body> </html>

Answer 1

Your markup is displaying vertically stacked cards, when you want to have horizontally stacked cards.

Your vertically stacked card:

<section class="card">
  <img src="https://i.ibb.co/VvC0vpN/paint-1.png" alt="">
  <div>
    <h3>Acrylic Painting One</h3>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod error
      enim laudantium, animi veniam libero eveniet culpa unde perferendis
      illo fugit corporis, voluptatibus totam dolorum, maiores magnam
      officia. Ab, delectus.
    </p>
    <a href="#" class="btn">Buy Now</a>
  </div>
</section>

As an example, here is a horizontally stacked card, using Bootstrap 5.0:

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous"> <section class="card m-3" style="width: 90%; max-width: 600px"> <div class="row g-0"> <div class="col-6"> <img class="img-fluid" src="https://i.ibb.co/VvC0vpN/paint-1.png" alt=""> </div> <div class="col-6"> <div class="card-body"> <h3>Acrylic Painting One</h3> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod error enim laudantium, animi veniam libero eveniet culpa unde. </p> <a href="#" class="btn">Buy Now</a> </div> </div> </div> </section>