I am currently working on creating some extra spacing on the left and right of a Bootstrap container.
My current approach involves using a 'fluid' container/section and adding margin on both sides to create the desired space.
However, the issue with this method is that on larger screens, the layout appears stretched out and unappealing. https://i.sstatic.net/KwogX.png
What I really want to achieve is a consistent spacing on the left and right outside the container on a standard screen size:
https://i.sstatic.net/xmHKc.jpg
I want the spacing outside the container to always be around 10%, without stretching on larger screens.
Check out my current progress on Codepen: https://codepen.io/monsmado/pen/ZEorope
From a coding perspective, it may not be the most efficient, as I quickly copied it from my React/Next.js project