Exploring new territories in web design, I'm currently working on achieving the layout shown below: Box Layout
I've encountered an issue where the last row of 4 boxes in the middle section is not appearing as intended. Once this row is successfully displayed, I will proceed to adjust the surrounding widths and heights for a clean and polished look. After conducting research online, it seems that I have properly cleared everything and ruled out any potential issues with the "boxstyle" class being misapplied. I even experimented with Google Dev Tools to troubleshoot. Any assistance you can offer would be greatly appreciated.
Here's my html:
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="css/reset.css">
<link type="text/css" rel="stylesheet" href="css/normalize.css">
<link type="text/css" rel="stylesheet" href="css/style.css">
<title>Layout Challenge</title>
<meta name="description" content="Layout Challenge"/>
<meta name="keywords" content="layout, challenge, classwork"/>
<meta name="author" content="Chantel Zapata"/>
</head>
<body>
<header class="marketnavrow1">
<div class="marketnavrow1a boxstyle">
</div>
<nav class="marketnavrow1b">
<ul>
<li class="boxstyle"></li>
<li class="boxstyle"></li>
<li class="boxstyle"></li>
<li class="boxstyle"></li>
</ul>
</nav>
</header>
<div class="magazine">
<aside class="boxstyle"></aside>
<div class="secondary">
<div class="mag1strowbox boxstyle">
</div>
<div class="mag2ndrowbox">
<div class="mag2ndrowbox1 boxstyle">
</div>
<div class="mag2ndrowbox2 boxstyle">
</div>
</div>
<div class="mag3rdrowbox">
<div class="4colrow boxstyle"></div>
<div class="4colrow boxstyle"></div>
<div class="4colrow boxstyle"></div>
<div class="4colrow last"></div>
</div>
</div>
</div>
In addition, here is my corresponding CSS code:
* {
box-sizing: border-box;
}
body {
margin: 0 auto;
width: 1090px;
}
.indextext {
margin-top: 60px;
font-family: "Arial", Verdana, san serif;
}
// More CSS styles continue here...