I’m having a problem with a margin when I narrow the screen to emulate a mobile/tablets.
Unfortunately, the stylesheet is used by around a 100 pages and I cannot change it (other than adding something that does not conflict with what I already have). So, I added the new css to the head, and it works fine until you start narrowing the screeen.
i would like the names of the restaurants to stay in-line with their description.
The reason that your heading are not in line with your paragraphs is because both elements have different margin and padding settings.
The padding on the <p> gets changed by a query on smaller screens, but the <h6> stays the same, so goes out of line.
If you want all these elements to stay in line, they should share the same margins and padding. Or better still, instead of applying it to them all individually, you can just apply padding to the parent container, so all children follow the same line.