CSS changes are not applying properly on test server-CodePudding

So I seem to be having some trouble with my css code. I'm trying to update one of our websites and add some clickable tiles onto our home page, but for some reason the positioning is off. When I apply my code on codepen or jsfiddle, it looks fine; however, when I apply the changes onto the css file, the site seems to want upload the proper changes, but it quickly reverts itself to an odd format. I wish I could explain it better, unfortunately I'm not well versed with html, js, or css.

I've tried to do a couple of troubleshooting steps such as using the fn f5 to refresh the site, cleared cache, and even tried to apply this onto my code <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> , but none of these steps seem to be working. If it helps, I was applying these changes to a test server using Ubuntu, both chrome and firefox were having fits with my code. Not sure if that makes a difference.

Below are a couple of screenshots, and my code I currently have.

So this is what it currently looks like. The area I highlighted is where those tiles should appear, also they should be in a horizontal position not vertical.

Now when I press the fn f5 to refresh the page I see the proper update, however, it covers the whole page, which should not happen, and within a split second my updates revert back to Screenshot image 1 layout.

<!DOCTYPE HTML> 
<head>
<style >

body {
  margin: 50%;
}

.wrapper {
  display: grid;
  position: relative;
  grid-template-columns: 18ch 18ch 18ch 18ch ;
  grid-auto-rows: 10ch ;
  grid-gap: 25px;
  grid-row-gap: 15px;
  position: relative;
  left: 25ch;
  top: 35ch;
  width: 0%;
  background-color: #fff;
  color: #444;
}

.box {
  display:block;
  position: relative;
  background-color: #d4d6d6;
  color: black;
  border-radius: 8px;
  padding: 12px;
  font-family: serif;
  font-size: 100%;
  font-weight: bold;
  text-align: center;
  text-shadow: hover;
  box-shadow: 4px 6px 6px #888888;
}
</style>
</head>
<body>
<div >
  <a  href="google.com">test1</a>
  <a  href="espn.com">test2</a>
  <a  href="yahoo.com">test3</a>
  <a  href="reddit.com">test4</a>
  <a  href="facebook.com">test5</a>
  <a  href="apple.com">test6</a>
  <a  href="nike.com">test7</a>
  <a  href="adidas">test8</a>
</div>

</body>
</html>

Oh forgot to mention, my css code is linked to a php file, and I used this format to link my file <?php include "custom_css/landing_page.css"; ?>

Thanks for your time!

CodePudding user response：