What am I doing wrong?

Hello Foundation Community,

I’m currently switching over from Bootstrap for a few reasons, however my transition isn’t the smoothest. I’m trying to start with just a simple layout as shown below. Though an external stylesheet is shown, it’s blank and unused. Essentially my 2 issues are (all have comments in HTML): No Shadow, Margin offset to left after using grid-margin-x and cell auto in the main body text (child div). Am I misunderstanding something? If I put grid-margin-x in the parent container, it expands the width, and the child div is still offset to the left, but with border-box shouldn’t it stay the same width either way?

`<!doctype html>`
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>Foundation First</title>

<link rel="stylesheet" href="css/foundation.css" />
<link rel="stylesheet" href="css/meteor.css" type="text/css" />
<link href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@500;600&display=swap" rel="stylesheet">
  <div class="grid-x align-center">
    <ul class="menu">
      <li><h5><a href="#">News</a></h5></li>
      <li><h5><a href="#">Media</a></h5></li>
      <li><h5><a href="./team.php">Team</a></h5></li>
      <li><h5><a href="#">Files</a></h5></li>
      <li><h5><a href="#">Forums</a></h5></li>
    </ul>
  </div>
  <div class="grid-y border-box" style="height: 1000px; background-color: #130f40;">
    <div class="cell">
      <h3>Foundation - Main Body Text</h3>
    </div>
    <hr>
    <div class="cell auto shadow grid-margin-x"> <!-- No Shadow, Margin offset to left -->
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id nisi bibendum, interdum ante in, consectetur mauris. Sed sit amet dolor nec turpis lobortis tincidunt in sit amet eros. Integer imperdiet ipsum ac risus commodo egestas. Praesent volutpat consequat molestie. Suspendisse imperdiet felis ut erat ullamcorper, vel feugiat sapien mattis. Nullam eget leo eros. Morbi semper massa vel aliquam placerat. Cras malesuada at nulla ac malesuada.</p>
    <p>Integer luctus luctus ante at ultricies. Aliquam erat volutpat. Etiam at faucibus magna. Mauris posuere leo et nisl aliquet dapibus. Quisque luctus augue sit amet tellus placerat pulvinar. Morbi tristique eros nunc, eu feugiat mauris tincidunt eget. Aliquam ut posuere ligula, non ultrices tellus. Quisque gravida tellus metus, eu vestibulum orci feugiat hendrerit.</p>
    <p>Morbi euismod convallis ante nec tincidunt. Nullam porttitor, urna vitae tincidunt euismod, diam est pretium metus, non posuere ligula ligula vitae orci. Vestibulum finibus convallis nisl a accumsan. Pellentesque tempus volutpat magna, id dapibus mi gravida hendrerit. Nam luctus vel enim in congue. Duis molestie convallis aliquet. Integer efficitur turpis massa, eu viverra lorem feugiat at.</p>
  </div>
</div>
<!-- Footer -->
   <div class="grid-y" style="background-color: black;">
      <div class="cell text-center">
      <span>Footer | <a href="mailto:#">Contact</a><!-- Modal --> | 2020</span>
      </div>
    </div>
  </div>
<script src="js/vendor/jquery.js"></script>
<script src="js/vendor/what-input.js"></script>
<script src="js/vendor/foundation.min.js"></script>
<script>
  $(document).foundation();
</script>

And my Result

Thanks for any tips or help.
David

Try enclosing all with <div class="grid-container">
Also, not sure what you are doing with negative margins?