The app does render, but taking 100 width, not utilizing column spacing. How come?

What I want is for the Player component to take up about 50% of screen width. And for the other two components to show up on the side. But everything is taking 100% width. I have imported the css, styles, via importing MuiThemeProvider.

I also highlighted the column width in the screenshot, even tried changing it to s12 m6 l3 just to experiment and it wtill gives me a full width image taking up the whole screen! What might I be missing? Thanks in advance!!