It's there a way to make these divs visible

So I was just writing some html and CSS stuff for fun, but only one of all the lines in my code is working here's my code

<!DOCTYPE html>
<Html Lang="en">

<Head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
    <title>Minecraft</title>
</head>

<body>
    <div class="container">
        <div class="border">
            <div class="content">
                <P>ihc</P>
            </div>
        </div>
    </div>
    <center>
        <footer>
            <p style="font-size: 1%;">&copy; Copyright 2022</p>
        </footer>
    </center>
    <script src="script.js"></script>
</body>

</html>

h1 {
    margin: 16px;
    font-size: 24px;
    font-weight: 600;
    line-height: 36px;
    font-family: EuclidCircularA-Regular;
}

p {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    margin: auto 16px;
    font-style: normal;
    font-family: EuclidCircularA-Regular;
}

.container {

    width: 100%;
    height: 100%;
}

.border {
    background-color: rgb(0, 0, 0);
    color: rgb(255, 255, 255);
    width: 100%;
    height: 100%;
}

.content {
    width: 90%;
    height: 90%;
    Background-color: rgb(255,255,255);
}

And all I can see is this: copyright text and a black box with no text even though there should be text

What should I do? Add styling for the "container" div? I'm not very good at this stuff so help would be appreciated.

Solution

You need to change .container height to 100vh and background color of .content to black.

Here you go:

h1 {
  margin: 16px;
  font-size: 24px;
  font-weight: 600;
  line-height: 36px;
  font-family: EuclidCircularA-Regular;
}

p {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  margin: auto 16px;
  font-style: normal;
  font-family: EuclidCircularA-Regular;
}

.container {
  background-color: rgb(0, 0, 0);
  width: 100%;
  height: 100vh;
}

.border {
  color: rgb(255, 255, 255);
  width: 100%;
  height: 100%;
}

.content {
  width: 90%;
  height: 90%;
  background-color: rgb(0, 0, 0);
}

<!DOCTYPE html>
<Html Lang="en">

<Head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="style.css" />
  <title>Minecraft</title>
</head>

<body>
  <div class="container">
    <div class="border">
      <div class="content">
        <p>ihc</p>
      </div>
    </div>
  </div>
  <center>
    <footer>
      <p style="font-size: 1%;">&copy; Copyright 2022</p>
    </footer>
  </center>
  <script src="script.js"></script>
</body>

</html>