Just starting out with HTML and CSS as I build my very first website, I've encountered a baffling alignment and positioning issue that has left me scratching my head. Any help in shedding light on this mystery would be greatly appreciated.
To better illustrate the problem, I've uploaded the HTML and CSS to codepen for you to take a look at: http://codepen.io/joe/pen/kJmeK
In addition, I've taken a screenshot of the issue for easier reference:
The strange behavior occurs when I enclose the phone number and address lines 1-3 within a p tag - they suddenly become right-aligned and appear stuck beneath the map. However, if I remove the tags, they return to their proper positions and function as expected.
Curiously, in the codepen preview, the p tags seem to display correctly without any issues.
I've attempted to rectify this by experimenting with negative margins and paddings in the CSS for both the h2 and p elements. Unfortunately, this approach only confuses the situation further by making it difficult to pinpoint the exact location of the <p>s and align them appropriately with the contact_us form.
For clarity, I have refrained from altering the styling of the p tags in any other part of my CSS code.
Any insights on what could be causing this perplexing issue would be immensely helpful.