CSS-сетка, использующая DIVs, которая работает на локальном сервере, не работает при переносе на сайт Django

Я пытаюсь создать CSS-сетку с использованием DIVs для отображения ряда из 3 ящиков.

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    html { font-size: 22px; }
    body { 
      padding: 1rem; 
      background-color: rgba(2, 26, 63);
    
    }

    .card {
      background-color: rgba(24,109,238, 0.7);
      transition: 0.5s;
      border-radius: 10px;
      color: white;
      padding: 1rem;
      height: 4rem;
    }

    .card:hover{
    box-shadow: 0 0 20px 0px rgba(80, 230, 236, 0.8);
    }

    .card h3{
        text-align: center;
    }

    .cards {
      max-width: 800px;
      margin: 0 auto;
      display: grid;
      grid-gap: 1rem;
      font-size: small;
    }

    /* Screen larger than 600px? 2 column */
    @media (min-width: 600px) {
      .cards { grid-template-columns: repeat(2, 1fr); }
    }

    /* Screen larger than 900px? 3 columns */
    @media (min-width: 900px) {
      .cards { grid-template-columns: repeat(3, 1fr); }
    }
  </style>

</head>
<body>
    <Div class="cards">
        <Div class="card" onclick="window.location='opnotener'">
            <h3>NLP-NER 4 Op Notes</h3>
            <P>Natural Lanugage Processing - Named Entity Rrecognition tool for surgical Procedure Notes.</P>
        </Div>
        <Div class="card" onclick="window.location='#'">
            <h3>Surgical EPR</h3>
            <P>Surgical EPR that covers the entire surgical landscape with sub-speciality pipeleines.</P>
        </Div>
        <Div class="card" onclick="window.location='opnoteannotator'">
            <h3>Op Note Annotator</h3>
            <P>Surgical procedure notes Annotator with drag and drop speciality specific entities.</P>
        </Div>
    </Div>

</body>
</html>

Предполагаемый вывод должен быть как показано ниже и работать на локальном сервере

Вывод на локальный сервер

Но мой вывод выглядит так, когда код загружен на хостинг (Django v3.2);

Вывод на хостинге - Django v 3.2

я посетил вашу страницу.

добавьте grid-template-columns: auto auto auto; к .applications-wrap классу и установите height:auto в .applications-col класс.

и ваша секция .applications не по центру, так что если вы хотите отцентрировать и ее, дайте мне знать.

Вернуться на верх