Not getting the layouts in proper format

Question

I got an assignment from Coursera to create a webpage like this https://github.com/jhu-ep-coursera/fullstack-course4/blob/master/assignments/assignment2/images/desktop.png

And when the size of the device changes between 768px and 991px, the webpage should look like this https://github.com/jhu-ep-coursera/fullstack-course4/blob/master/assignments/assignment2/images/tablet.png

And when the size falls below 768px, it should look like this https://github.com/jhu-ep-coursera/fullstack-course4/blob/master/assignments/assignment2/images/mobile.png

NOW I am able to get the layout like the first image and third image but not like the second image. Can you tell me what am I doing wrong?

This is the first time, I am creating a responsive model so the code might contain unnecessary lines(according to you), so it would be very helpful if you could also suggest something.

This is my code
https://code.sololearn.com/WVXGAEBuqBq0/?ref=app

Answer 1

try using the div class=“container”....it adds spacing and margin and allows it to be more responsive

also use the inspect tool on chrome to check ur css to make sure its not over riding some of bootstaps margin and padding styles

and if that doenst work use a screen query...if ur unfamiliar with the way they work look here:

https://www.w3schools.com/css/css_rwd_mediaqueries.asp