Currently in the process of setting up a grid layout for a webpage under development. Encountering an issue with the .container class, that is supposed to contain all my div elements, not having any margin. Managed to remove the margin on the left side using margin-left: 0px;, and likewise with margin-right: 0px; removes it on the right. However, struggling to eliminate margins on both sides simultaneously. Interestingly, there seems to be no margins at all when viewing on a mobile device.
The structure of the container class:
<div class="container con">
<div class="row">
<div class="col-sm grey">column 1</div>
<div class="col-sm gr">column 2</div>
<div class="col-sm grey padded">column 3</div>
</div>
Applying styling within the same HTML page:
<style>
.con{
background-color: #a1a1a1;
height: 200vh;
width: 100%;
}
.grey{
background-color: orange;
height: 200px;
}
.gr{
background-color: red;
height: 200px;
}
.space{
padding: 10px;
}
</style>
Seeking ideas or solutions to completely remove margin on both sides. Any input would be greatly appreciated!