In my Angular application, I have a main flex container called main-container with a child element named box. The goal is to center the child element within the parent and make it take up 100% of the parent's width. However, due to padding settings, the width of the box is currently set to 80px. Below is a snippet of the code that demonstrates this behavior.
.main-container {
width: 100%;
min-height: 100vh;
padding: 15px;
background: linear-gradient(-135deg, #c850c0, #4158d0);
display: flex;
justify-content: center;
align-items: center;
}
.box {
max-width: 500px;
width: 100%;
padding: 40px;
border-radius: 10px;
background: #fff;
text-align: center;
}<div class="main-container">
<div class="box">
</div>
</div>This image provides a visual representation of how the Angular page appears:
https://i.sstatic.net/vnj8Z.png
Your assistance is greatly appreciated!