Currently, I am developing an application with a primary layout that utilizes the bootstrap class "container-fluid".
<main class="container-fluid">
[....]
//a child div where I'd like to remove the parent's padding for this div
<div>
[....]
</div>
</main>
As you may be aware, the container-fluid class includes padding by default, which is essential for the layout.
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
However, there is a specific requirement within one of the child components where I need to exclude the padding. To illustrate my point, I have created a basic image:
https://i.sstatic.net/4xNyW.png
I understand that moving the component outside of the main tag could solve this issue. However, it is crucial for me to keep it inside for specific reasons. Thus, I am exploring methods to remove the padding of the parent div solely for the child div in question.
Your assistance is greatly appreciated!