I am trying to setup my layout page. I have the navbar up top with a spacing of 165px on the bottom, that seems to work. Then I add a container, row and 3 columns with paragraph in each. I now space 350px down and the first spacing disappears. I still see the 165px in the design panel but the layout shows it just under the heading. Check it out with the webserver and the spacing is gone.
Your description is quite unclear.
It would be best if you provide a link to your page where we can check this.
Not sure what it is that you are trying to do. However, following your description, I have come up with this design:
<!doctype html>
<html lang="en">
<head>
<base href="/">
<!-- Required Meta Tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Untitled Document">
<title>Untitled Document</title>
<!-- CSS -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous" />
<link rel="stylesheet" href="/bootstrap/5/css/bootstrap.min.css" />
<link rel="stylesheet" href="/css/style.css" />
<!-- JavaScript -->
<script src="/dmxAppConnect/dmxAppConnect.js"></script>
<script src="/dmxAppConnect/dmxRouting/dmxRouting.js" defer></script>
<script src="/dmxAppConnect/dmxBootstrap5Navigation/dmxBootstrap5Navigation.js" defer></script>
</head>
<body is="dmx-app" id="main">
<!-- Navigation -->
<nav class="navbar navbar-expand-lg bg-body-tertiary" style="margin-bottom: 165px">
<div class="container">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapse1" aria-controls="collapse1" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div id="collapse1" class="collapse navbar-collapse">
<div class="navbar-nav w-100">
<a class="nav-item nav-link" href="#">Home</a>
<a class="nav-item nav-link" href="#">About</a>
<a class="nav-item nav-link" href="#">Contact</a>
</div>
</div>
</div>
</nav>
<!-- Features -->
<div class="container" style="margin-bottom: 350px">
<div class="row">
<div class="col">
<p>A nice paragraph</p>
</div>
<div class="col">
<p>A nice paragraph</p>
</div>
<div class="col">
<p>A nice paragraph</p>
</div>
</div>
</div>
<!-- Main Content -->
<main is="dmx-view" id="content">
<%- await include(content, locals); %>
</main>
<script src="/bootstrap/5/js/bootstrap.bundle.min.js"></script>
</body>
</html>
With this as the result:
Thanks Ben.
The code looks real close to mine but I did not do "margin-bottom" on either container.
I will try