Why does my html look different on codepen

Why does my html look different on codepen
0.0 0

#1

I am messing around with html and css by making a mock website. I have been having trouble with one of my nested grids expanding it’s container and blocking other elements on the page (see screenshot). I put this code in codepen so I could ask someone else to look for the problem but the issue doesn’t occur in codepen.

Why does it look different in codepen?

Codepen url: https://codepen.io/Naturalist/pen/oyPgEe


#2

When your code is not in Codepen, is it all in a single html file (html and css)? If so, copy/paste what is in that file into a reply.

When you post a code block into the forum, precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.


#3

Yes the html and css is in one file. Here it is:

<html>


<head>
<title>
Mock website for webdevelopment company
</title>

<style>
body {
	background: white;
	font-family: arial, helvetica, sans-serif;


}

.container {
    height:100%;
	background-color:white;
    display:grid;
	grid-template-columns: repeat (4, 1fr);
	grid-template-rows: repeat (5, 1fr);
	grid-template-areas:
	" menu menu menu menu "
	" content content content content " 
	" content content content content "
	" content content content content "
	" footer footer footer footer " 
}

@media only screen and (max-width: 500px)
{ .container { 
    grid-template-columns: auto auto;
    grid-template-areas:
       "menu menu "
      "content content"
      "content content"
      "content content"
      "footer footer";
  }
}

.contentgrid {
    display:grid;
    height:100%;
    grid-template-columns: auto auto auto auto;
    grid-template-rows: auto;

}

.One {
    background-color:pink;
}

.Three {
    background-color:blue;
}

.Five {
    background-color:green;
}



.header { 
	padding:10px;
	color:white;
	background-color: white;
    grid-area:header;
	display:none;
	
}

.menu  {
	color: white;
	width:100%;
	background-color: black;
    grid-area:menu;
}

.menu ul li {
	list-style-type:none;
	display:inline;
  background-color:black;
}

.menu li a {
	display:block;
	text-decoration:none;
	border-right: 2px solid black;
	padding: 3px 10px;
	float:left;
	color: white;
  background-color: black;
}

.menu li a:hover {
	background-color: white;
  color:black;
}
	
	


h1 {
	color:black;
	font-size:65px;
}

h2 {
	color:black;
}

h3 { 
	color: black;
}

.content {
	color: black;
	width:auto;
	margin: 5% 5% 0 5%;
	background-color:white; /*gradient color eventually to make box look 3d*/
    grid-area:content;
	border: 1px solid black;
}


.footer {
    background-color:black;
    color:white;
    grid-area:footer;
}





</style>
</head>

<body>

<div class="container">

	<div class="header">
		<h1>Quercus Web Development</h1>
	</div>

	<div class="menu">
	  <ul>
<li><a href=""> <u>Home</u> </a></li>
<li><a href=""> <u>About</u> </a></li>
<li><a href=""> <u>Portfolio</u> </a></li>
<li><a href=""> <u>Contact </u> </a></li>
	  </ul>


	</div>









<div class="content">

    <div class="contentgrid">
<div class="One">One</div>
<div class="Two">Two</div>
<div class="Three">Three</div>
<div class="Four">Four</div>
<div class="Five">Five</div>
<div class="Six">Six</div>
    </div>

</div>





</div>




<footer class="footer">
Copyright 
</footer>

</body>
</html>