Addpipe: Responsive Layout Issue

[fewnew]

I'm using the Addpipe recorder service for a project and I want to have it next to an embedded video on Desktop. I'm using media queries to make the website responsive and on phone screens, I want the recorder to break into the next line. At all times I want everything to be centered. Here is the link to the project: https://fewnew.github.io/YNWA-web/
You can view source to see the code.

I've tried separating the recorder and embedded video into two columns on one row. It looks okay on phone size but not on desktop. Piperecorder takes an inline height and width value. I set the values to percentages but it doesn't seem to be affected. I'm a beginner web designer, and I would appreciate any help with this layout I'm trying to create. Thanks!