One element in my portfolio I'm building is pushing far to the left, but cannot figure out why

I copy and pasted “Section 1” to “Section 2”, but section 1 is lining up nicely on my page and section 2 looks totally different. The CSS is the same, as far as I can tell everything about the HTML is the same other than the Section ID. Everything I am doing is trial and error at this point, and I am just totally hung up on this right now. Any help would be appreciated!

Here’s my codepen project for reference Thank you.

I would suggest having a look at the bootstrap docs again (you don’t need to be wrapping all sorts of things in <div class="container-fluid"></div> and have a look at your HTML tags - there is no <p1> tag.

You can typically use one .container-fluid and put a ..row inside of that (often only one is all that is needed). Then you can use various col-* containers inside the row which can be columns at wider widths or fill entire “rows” at smaller browser widths.

I recommend reading this thread:

Good luck!

Thank you! Very helpful. I never really felt like I was told how to do these things or necessarily how what their functions are, so like I said I’m totally just going by trial and error and seeing what works. I’m positive my code is embarrassingly sloppy to anyone who knows what they’re looking at.

Your section paragraph text looks like this:
<.em><.h1>bla bla bla text…<./p1><./h1><./em>
you structured it completely wrong… its not p1 its just p, and you shouldn’t put h1 tag before p.
Do it like this: <p id = "something">your text goes here</p>
And in css do it like this: #something{font-style: italic; font-size: 16px; text-align: center}

that should work, if have need any help just ask :wink:

So I could put all of those things I attributed to separate div tags in the p tag? If that’s what you’re saying, thanks, that will definitely help to get rid of unnecessary code.


–if you want to use div
i tried cleaning it up like in my previous post and your section is not out of screen anymore
have fun!