https://codepen.io/M-E-F-R/full/WbNQbPv
This is the final page after i added a parallax header. Without the the header does my template work on all screens, after adding the parallax header the three single columns stack up on top of each other. Why? Can someone explain?
This is the website without the Parallax header.
https://codepen.io/M-E-F-R/pen/bNGKRJz
I`m not sure what your issue is by the description, but you have two errors in both files.
1. Incorrect closing tag on an image element
2. Missing closing brace in CSS
3. Special characters must be escaped : [ < ].
Special characters must be escaped : [ > ].`<h1/>`
4. Tag must be paired, missing: [ </h2></svg></div> ], open tag match failed [ <h2> ] on line 11.
You have errors in your CSS, mainly unclosed blocks for media queries, but it is also causing unintended nesting in some places.
You should format your code better. Install VS Code and the Prettier extension and format it. It will error out, but if you click the Prettier button in the footer of the editor, it will let you know at what line the error occurred.
You can also use a validator, but it won’t be very useful until you have fixed the syntax errors, otherwise, you will just get parsing errors.