Seeking advice on how to create a layout with a centered header and left sidebar within a wrapper div. The desired effect is for the sidebar to be positioned slightly to the left of the header, as shown in the screenshot.
Currently facing difficulty ensuring that the sidebar maintains its position relative to the header when resizing the window. Any CSS tips or solutions would be greatly appreciated, as I am still developing my skills in this area. Thank you!
Provided below is the HTML and CSS code (please note that the margin property was removed from the nav element):
<body>
<div id="wrapper">
<header>
</header>
<nav>
<ul>
</ul>
</nav>
</div>
body {
margin:0;
padding: 5px;
background-color: #121212;
}
#wrapper {
margin:0 auto 0 auto;
width:1024;
}
header {
/* Gradient styling properties */
background-image: linear-gradient(to bottom, #0C0DA6 0%, #0E0B58 100%);
width: 768px;
height:100px;
border-radius: 4px;
border: 2px solid #adadad;
margin:0 auto 0 auto;
}
nav {
/* Gradient styling properties */
background-image: linear-gradient(to bottom, #0C0DA6 0%, #0E0B58 100%);
width:230px;
height:235px;
border-radius: 4px;
border: 2px solid #adadad;
}