It requires some moving things around, so this might be a little difficult to explain...
Within the code, you have this thing called <div class="container fluid"></div> that should only exist once in the entire code. It should wrap the entire rest of the code.
After that, you should have a bunch of <div class="row"></div>, which represent each row
And nested within each row are <div class="col-sm-3 p-1"></div>, which are columns, and where your squares go
What you're doing is nesting these in the wrong order. Here's an example
(Sorry to Avi if I shouldn't have uploaded this but since it's only the topmost code I think it should be fine?)
See how you have a fluid container that's inside another row? That's not necessary since only one fluid container is necessary to wrap the whole thing, and your rows should all be side by side in the code (so after the </div>)
Edit: since this is such a common error I thought I should add a reminder to double check that you have exactly one </div> closing each <div> when you edit