Not sure if this is an issue or user error so forgive me if it's the latter.
I've decided to try my hand at editing some areas of the default Bootstrap menu's to add text with links in them (sections so to speak) so I can bypass the need for multi level menu's for the clients I get that only need a couple 1 more sublevel than the default. In this case I've created a block with a set of links (all blank as that's not completed yet, trying to fix this issue first). I can manage editing the links colors etc. no issues there, and they seem to follow the setup for margins and paddings etc. just fine, but the main title item on the menu within the box does not. Here's some screenshots and I've uploaded the page to a test server so you can see the code as well then. Thanks for any input you can give here as the 2 views are definitely not the same. I would prefer it to be like it is in BSS which is what I expected it to be when I opened the browser, but there always has to be a culprit doesn't there! lol.
The part to look at is the word: Printed Ribbons in white which in the Chrome browser is shifted over to the right. I've tried removing classes to see if something in the code was doing it, but nothing made any difference on that.
P.S. Ignore the colors (not relevant for this) and the line that looks out of place, I had something else targeted when I took the screenshot. And ignore the fact that the menu is open at page load. The box setup is a set of Custom Code (was just easier to manage, but I'm sure it can be done without, but it was a pain trying to figure it out lol).
Link to Chrome view: 
Link to BSS view: 
Link to site page:
https://eiwd-tester.work/trs-ribbons-temp/index.htmlSite Page Tester