Although there are numerous inquiries concerning this topic, I am having trouble sorting it out. As a newcomer to CSS, I am attempting to replicate the straightforward box within a box technique.
You can view my Codepen here.
Additionally, here is the HTML snippet for further clarification.
<html>
<head>
<link rel="stylesheet" href="index.css">
</script>
</head>
<body class="body">
<!-- Navbar -->
<nav class="navbar">
<h1>Hello World</h1>
</nav>
<!-- Header Boxes -->
<div class="header-box">
<div class="child-box-1">
<div class="child-box-2">
<div class="child-box-3">
</div>
</div>
</div>
</div>
</body>
</html>
In essence, the class = 'header-box' should contain child-box-1,child-box-2,child-box-3, resulting in a red, yellow and black box nested within the primary blue box.