The css code is working 'cause .bg works, but .container doesn't work. Whether i erase the-CodePudding

The css code is working 'cause .bg works, but .container doesn't work. Whether i erase the .bg, .container starts to work. How can i fix it?

This is my html that is normal, is simple but i can't see what is wrong.

<html>

    <head>

        <title>QR Code Component</title>
        <meta charset="utf-8"/>
        <link href="css/style.css" type="text/css" rel="stylesheet"/>

    </head>

    <body>

        <div >

             It doesn't appear on css

            <div >div aqui</div>
                <!-- <img  src="images/image-qr-code.png"/> -->

            <h2>Improve your front-end skills by building projects</h2>
            <p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
        </div>


    </body>

</html>

and this is my css code:

*{
    margin: 0;
    padding: 0;
}

body{
    background-color: hsl(212, 45%, 89%);
}

.bg{
    width: 300px;
    height: 430px;
    background-color: hsl(0, 0%, 100%);
    margin: 0 auto;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 15px;
    overflow: hidden;
    text-align: center;
};

This part doesn't appear, i can't see what's wrong in this part. One of these photos, is the project i'm copying, and the other is my copy.

.container{
    width:90%; 
    height:265px; 
    background-color:green; 
    margin: 0 auto; 
    margin-top: 5%; 
    margin-bottom: 5%; 
    border-radius: 10px;enter code here
};

CodePudding user response：

This should work now. Remove Semicolons after the closing tags of class .bg and .container

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: hsl(212, 45%, 89%);
}

.bg {
  width: 300px;
  height: 430px;
  background-color: hsl(0, 0%, 100%);
  margin: 0 auto;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 15px;
  overflow: hidden;
  text-align: center;
}

.container {
  width: 90%;
  height: 265px;
  background-color: green;
  margin: 0 auto;
  margin-top: 5%;
  margin-bottom: 5%;
  border-radius: 10px;
}

<div >It doesn't appear on css
  <div >div aqui</div>
  <h2>Improve your front-end skills by building projects</h2>
  <p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
</div>