CSS grid using DIVs that works on local server not wotking when uploded to Django site-CodePudding

I am trying to create a CSS grid using DIVs to display a row of 3 boxes.

<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 >
        <Div  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  onclick="window.location='#'">
            <h3>Surgical EPR</h3>
            <P>Surgical EPR that covers the entire surgical landscape with sub-speciality pipeleines.</P>
        </Div>
        <Div  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>

The intended output should be like below and works on local server

Output on local server

But my output looks like this when code is uploaded to the hosting site (Django v3.2);

Output on hosting site - Django v 3.2

CodePudding user response：

i visited your page.

add grid-template-columns: auto auto auto; to .applications-wrap class and set height:auto to .applications-col class.

and your .applications section is not in center so if you want to center that as well let me know.