I am currently working on a website using HTML and SASS. My design includes a fixed header and aside sections.
header{
width: 100%;
box-shadow: 0 0 4px rgba(0,0,0,.25);
position: fixed;
z-index: 5;
top: 0;
left: 0;
right: 0;
}
aside{
height: 100vh;
width: 320px;
border-right: 1px solid #e2e2e2;
position: fixed;
top: 0;
left: 0;
text-align: center;
padding: 0 1.25rem;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
-webkit-box-pack: center;
justify-content: center;
z-index: 3;
}
main {
padding: 69px 0 0 320px;
z-index: 1;
overflow: hidden;
width: 100%;
}
The issue I'm facing is that the main content is not utilizing the full width of the page. I'm looking for a way to use the calc() function in the main section to subtract the padding values from the width. For more clarity, you can refer to this screenshot.