In my HTML code, here is a link to an image: https://i.sstatic.net/zhj7o.jpg
I have successfully completed the sections associated with this image: https://i.sstatic.net/wIE6N.png
However, I'm facing an issue now. I am unable to position the navigation bar ("Home About Us...") under the "Art Store" section using the div method as I tried before. The navigation bar keeps ending up in the wrong place, as seen here:
https://i.sstatic.net/8FwrU.jpg
Here's a snippet of the HTML:
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Assignment 1 - Page 1</title>
<link href="reset.css" rel="stylesheet">
<link href="assign1.css" rel="stylesheet">
</head>
<body>
<div class="navTop">
<a href="#">My Account</a>
<a href="#">Wish List</a>
<a href="#">Shopping Cart</a>
<a href="#">Checkout</a>
</div>
<div class="page1Tile">
<h1>Art Store</h1>
</div>
<div class="page1SubNav">
<ul>
<li>NMSL</li>
<li>CNM</li>
</ul>
</div>
</body>
</html>CSS Snippet:
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.428571429;
color: #333333;
background-image: url(images/stucco/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0477707167676b5b44365c2a746a63">[email protected]</a>)
}
.navTop {
height: calc( 40px + (50 - 40) * ( (100vw - 400px) / ( 800 - 400) ));
line-height: calc( 40px + (50 - 40) * ( (100vw - 400px) / ( 800 - 400) ));
background:black;
margin: -8px -8px 0 -8px;
}
/* Additional CSS styles go here */