Hello everyone, I require some assistance. I am attempting to create a full-width navigation while being constrained by a wrapper div with a fixed width of 900. I am unsure of how to achieve this without creating an additional div like the header. I am seeking a solution that allows me to set the full width of elements inside the wrapper with minimal code. Below is the HTML code. Please make the code beginner-friendly as I am new to coding.
<html>
<head>
<title>MY TITLE</title>
<link rel="stylesheet" href="design.css">
</head>
<body>
<div class="full">
<div class="box">
<h1>HEAD</h1>
</div>
</div>
<div class="wrapper">
<div class="list">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</body>
</html>
Below is the relevant CSS code:
*{
padding:0px;
margin:0px;
}
.wrapper{
margin:0 auto;
width:900px;
border:1px solid red;
background:green;
}
.full{
width:100%;
background:black;
}
.box{
text-align:center;
color:red;
width:500px;
margin:0px auto;
background:black;
}
.list{
margin:0 auto;
width:500px;
}
ul li {
display:inline;
list-style-type:none;
padding-right:30px;
}