I am still learning the ropes of javascript, CSS, HTML and programming in general. Despite being a beginner, I have managed to grasp the basics of simple HTML and CSS. I had successfully created a nested div structure before, but suddenly the inner div is not displaying properly. Only the text appears, nothing else. webview Here's the code snippet from my HTML file:
<!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 issue could be linked to another strange problem where elements are draggable without any explicit setting for it.
I've attempted reloading the program and even restarting my computer, but the problem persists. Additionally, I've created different documents to see if the issue was specific to one file, but no luck so far.