I'm struggling to create a bootstrap layout similar to the one on Codepen.
Everything looks good on the codepen demo:
...but when I try to view the page locally in my browser (Chrome and Safari), the design becomes distorted and elements don't stack as intended.
The issue seems to be that the
<div class="container thirdSection">rows within this container-div to overflow the container boundaries.
A similar problem occurs within the
<div class="container fourthSection">I am using WordPress running on "Local by Flywheel" for the local setup.
The problem is illustrated in the screenshots below.
Could WordPress be the cause of this issue?
index.php
<?php get_header(); ?>
...
header.php
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php wp_head();?>
</head>
<body>
<header>
<div class="container">
<div class="container topSection">
...
footer.php
<!-- Footer -->
<footer class="page-footer font-small mdb-color lighten-3 pt-4">
...
functions.php
<?php
...