Learnings

Form content indented compared to index page

Issue: My form content (.form-container) was slightly indented horizontally compared to the index page content.
Cause: The .form-container CSS rule had horizontal padding (padding: 0 1rem;) while the index page content relied on the body's margin or a container without that specific padding.
Resolution: I removed the horizontal padding (padding: 0 1rem;) from the .form-container CSS rule to align it with the index page's container.
Learning: I learned to ensure consistent container padding/margins across different page templates or layouts for visual alignment and a cohesive look. Inspecting element styles using browser dev tools is helpful.