CSS of one component causing unwanted formatting in another

Question

I am still just learning in Angular, CSS, and HTML (all three are new), so have some patience with me please.

I received some code, and was given the task to fix some formatting.

Here is the problem:

When the page first loads, the page header has some padding. See picture below on the left.

However, when I navigate to another page, which has this code:

/* Removing padding and scroll bar from main page */
::ng-deep html > body > main#app-content {
    overflow-y: hidden;
    padding: 0;
}

and then navigate to any other component/page, the padding is gone and everything is moved all the way to left of the screen, which is very annoying. See picture below on the right. Note: someone told me that this is the code that is causing this situation, and I actually have no idea what it is actually doing (besides setting the padding and y-scroll).

This picture shows two components/pages before I access the page with the code above (shown on the left side in the picture), and then after I navigate to that page with the code above (shown on t eh right side in the picture). Note the green line is for reference to show how the padding is gone.

So I would like to have the original padding/formatting back when I navigate back to it after I access the page with the code above.

Also, can someone explain to me why it's doing this? And if possible, what does the code actually mean? Here are some specific questions:

1. How can I stop this from happening on another page?
2. What does "::ng-deep html > body > main#app-content" mean?
3. What does the greater sign do?