Why does the box not show up in div?

July 1, 2023

I am new to javascript, CSS, HTML and programming in general. Though I am new I feel that I have a decent grasp of simple HTML and CSS. Previously I have successfully made a div inside a div, but all of a sudden the second div does not show up. The text shows up, but nothing else.
webview
This is my HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>My Website</title>
    <link rel="stylesheet" href="./style.css">
    <link rel="icon" href="./favicon.ico" type="image/x-icon">
  </head>
  <body>
    <main>
        <h1>Welcome to My Website</h1>  
        <h2>Welcome</h2>
        <div class="background">
          <div class="foreground">foreground</div>
        </div>

    <style>
      .background {
        width: 300px;
        height: 300px;
        background-color: red;
      };
      .foreground {
        width: 100px;
        height: 100px;
        background-color: blue;
      };
    </style>
  </body>
</html>

This may be related to another wierd problem I am having, where elements are draggable, even if I have not set them to be.

I have tried reloading the program and restarting my computer, but nothing changes. I have also made multiple different documents to see if it was an issue with the specific document I was working on.

>Solution :

You are adding a semi-colon ; after your css closing braces, which is not supposed to be, just them them out and your css should run just fine.

Example:

<style>
  .background {
    width: 300px;
    height: 300px;
    background-color: red;
  }
  .foreground {
    width: 100px;
    height: 100px;
    background-color: blue;
  }
</style>

Also, it’s usually best practice to put your <style> inside your <head> tag in your code.