CSS Whitespace on left side of text - why is it there?

Question

https://codepen.io/cabji/pen/NWBNvyb?editors=1100

If you load the pad and widen it to be in desktop layout, the second section titled "Choose loads for yourself" the place holder text paragraph has a piece of whitespace indenting the first line of lorem ipsum text to the right.

Why is this whitespace there? I can't find any reason for it to be there.

Answer 1

@media only screen and (min-width: 992px)
.text-content {
margin: 0 auto 40px 135px;
text-align: left;
}
that media query the last value is 135px margin in the lorem.

Answer 2

Thank you.

I can see why I was applying that margin. It was for the text-content in the section above, so I have to move the styling out one level to the containing boxes.

Struggling with learning when it's appropriate to use a class, or more probably, _where_ attributes should be applied.

Answer 3

You can use a class anywhere. Just picture the class as a perimeter; margin says how close it should be to the previous and next element (I usually do margin-bottom, so I know the next element will start where it should), and padding is how close you want things on the inside to be to that perimeter line.

Best way to see it is to add a bunch of 1px borders in different colors on different elements (element meaning an html tag where the class goes).

Feel free to ask more, if that was even any help lol.