Issue with bootstrap

If I didn’t take the screen shot correctly or if there is a better way please let me know.

ok here is my issue…

On the left is what I was supposed to complete on the right is what I ended up with.

I’m supposed to be using the container-fluid class in html and target that div to have a padding: 3% 15%;

when I run it it moves but not far right enough.

I hope I explained this right my head hurts from trying to figure this out and I need a break.


What you have in the top picture is the elements in the order that they are in the html (Block elements stack vertically unless you intervene). Pay attention to the lines in the picture because ones that appear empty or look like they’re grouping other things could be container divs if they aren’t something like a header.

You could float both things left then they’d beside by side or make them inline-block. Since you’re using bootstrap you can use the grid.(I can’t read the code in the pictures). If the grid is the entire width of the body then it’s probably columns 2-6 and 7-11. If you have margins to create the space on the sides and center the grid then it’s probably columns 1-6 and 7-12.

It’s pretty hard to help with just screenshots and course material we don’t have access to. At the very least you should post a live version of this project on something like Codepen or Codesandbox.

I don’t particularly see a reason why the columns would be stacking, but the lg breakpoint is at 992px so the viewport has to be large enough for the columns not to stack. What resolution is your monitor?

I figured it out… I was missing an = sign before a class… sorry for the trouble guys and thanks for looking into it.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.