/* ============================================================ PAGE-LAYOUT-FIX.CSS Use this ONLY on pages that include Header.php / footer.php (e.g. book-a-consultant.php). It overrides registration.css's body{display:flex} rule, which was written for a standalone page with a single child (.page-wrap). Once Header + Footer are added, body has 3 direct children and the flex-row rule squeezes them all into one horizontal line — that's the bug in the screenshot. Load order in the must be: 1) css/root.css 2) css/registration.css 3) css/page-layout-fix.css <-- this file, LAST ============================================================ */ body{ display:block; /* undo registration.css's flex row */ align-items:unset; justify-content:unset; min-height:unset; padding:0; /* registration.css's 50px/16px padding no longer needed here */ } /* .page-wrap used to rely on body's flex centering for its vertical spacing; give it that spacing directly instead so it sits properly below the header and above the footer. */ .page-wrap{ width:100%; max-width:1000px; margin:50px auto; padding:0 16px; } @media (max-width:600px){ .page-wrap{ margin:30px auto; } }