本地查看的网页
就像标题所说的那样，我正在做一项家庭作业，已经到了终点。我在本地查看了页面(如附图所示(，一切都很好。当我把HTML和CSS放在Github和另一个托管服务器上时，我在布局上得到了一些不同的东西，我一直不知道为什么。我在开始我的网页时加入了Myer的重置，所以我认为布局是通用的，但仍然遇到了问题。
这是我在Github上的网页：https://ddenio.github.io/CSS3_Websiteproject4.0/DerinCSS3_4.0/DerinfinalProject4.0.html
在不同的服务器上：http://ddenio.byethost15.com/DerinfinalProject4.0.html
这是我的代码：
body{
background-color: #424242;
margin: 0 auto;
width: 95%;
}
h1 {
line-height: 100%;
font-family: Helvetica;
font-size:300%;
color:rgb(255,255,255);
text-shadow: 0 0 20px #000;
text-align: left;
border-radius: 10px;
padding-left: 20px;
margin-top:25px;
padding-bottom: 5px;
margin-left:5px;
margin-bottom: 50px;
}
h2{
line-height: 100%;
font-family: Helvetica, Georgia, Arial, "Times New Roman";
font-size:200%;
color:#03DAC6;
background-color:#6320EE;
text-align: left;
padding: 8px;
text-shadow: 0 0 3px #000;
font-weight: bold;
}
section {
display:inline-block;
height: 130px;
width:99%;
margin: 20px 10px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-o-border-radius:15px;
border-radius: 15px;
background-color: #8075FF;
border: solid 1px #080808;
overflow: hidden;
perspective: 1px;
padding-bottom: 8px;
}
nav {
line-height: 150%;
background-color:#8075FF;
text-align: left;
font-family: Georgia,Arial, "Times New Roman";
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-o-border-radius:15px;
border: solid 1px #080808;
margin: 20px 10px;
border-radius: 10px;
overflow: hidden;
perspective: 1px;
}
li {
font-family: Helvetica,Georgia, Arial, "Times New Roman";
font-size:115%;
color:rgb(0,0,0);
text-shadow: 0 0 1px #000;
}
label {
font-variant: small-caps;
font-family: Helvetica,Georgia, Arial, "Times New Roman";
font-size:115%;
color:rgb(0,0,0);
text-shadow: 0 0 1px #000;
}
summary {
font-variant: small-caps;
font-family: Helvetica,Georgia, Arial, "Times New Roman";
font-size:115%;
color:rgb(0,0,0);
text-shadow: 0 0 1px #000;
padding: 20px 10px;
}
p {
font-variant: small-caps;
font-family: Helvetica,Georgia, Arial, "Times New Roman";
font-size:115%;
color:rgb(0,0,0);
text-shadow: 0 0 1px #000;
font-style: italic;
padding-left:10px;
}
footer {
display: inline-block;
margin: 30px 10px;
background-color:#8075FF;
border: solid 1px #080808;
padding: 10px;
border-radius: 10px;
}
#footertext {
font-family: Helvetica,Arial, Georgia, "Times New Roman";
font-size:100%;
color:rgb(0,0,0);
text-shadow: 0 0 1px #000;
font-weight: bold;
}
ul {
padding-left: 10px;
padding-top:10px;
}
div {
padding: 20px 10px;
}
a {
display:inline-block;
text-shadow: 0 0 1px #000;
color: rgb(0,0,0);
background-color:#03DAC6;
text-decoration: none;
padding: 5px;
margin:5px;
margin-top:10px;
margin-bottom:10px;
border-radius: 10px;
font-weight: bold;
}
img {
width: 150px;
}
.animate{
background:#03DAC6;
-webkit-transition:-webkit-transform 1s,opacity 1s,background 1s,width 1s,height 1s,font-size 1s;
-webkit-border-radius:5px;
-o-transition-property:width,height,-o-transform,background,font-size,opacity;
-o-transition-duration:1s,1s,1s,1s,1s,1s;
-moz-transition-property:width,height,-o-transform,background,font-size,opacity;
-moz-transition-duration:1s,1s,1s,1s,1s,1s;
transition-property:width,height,transform,background,font-size,opacity;
transition-duration:1s,1s,1s,1s,1s,1s;
}
.animate:hover{
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
opacity:1;
background:#1ec7e6;
}
.animate:focus{
background:rgb(255,255,255);
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Derin's Final Project</title>
<link rel="stylesheet" href="assets/stylesheets/Meyer_reset.css">
<link rel="stylesheet" href="assets/stylesheets/html5final4.css">
</head>
<body>
<header>
<h1>Derin Eugene DeNio</h1>
<nav>
<h2> Links </h2>
<a href = "https://en.wikipedia.org/wiki/Main_Page" title="Wikipedia.org" tabindex="1" class="animate">Wiki</a>
<a href = "https://en.wikipedia.org/wiki/1961_Haitian_parliamentary_election" title="1961 Haitian parliamentary election" tabindex="2" class="animate">Wiki 2</a>
<a href = "https://en.wikipedia.org/wiki/Acad%C3%A9mie_Vitti" title="Académie Vitti" tabindex="3" class="animate">Wiki 3</a>
<a href = "https://en.wikipedia.org/wiki/Former_Gilead_Railroad_Station" title="Former Gilead Railroad Station" tabindex="4" class="animate">Wiki 4</a>
</nav>
</header>
<section>
<h2>Favorite Foods</h2>
<ul>
<li>Pizza</li>
<li>Caprese Salad</li>
<li>Tacos</li>
<li>Brownies</li>
</ul>
</section>
<section>
<h2>Achievements</h2>
<div>
<label for="course">Progress in this course (100%)</label>
<progress id="course" value="100" max="100">100%</progress><br>
<label for="capstone">Progress in the Specialization capstone (20%)</label>
<progress id="capstone" value="20" max="100">20%</progress><br>
<label for="life">Progress in life goals (45%)</label>
<progress id="life" value="45" max="100">45%</progress>
</div>
</section>
<section>
<h2>More About Me</h2>
<details>
<summary>My Childhood</summary>
<p>I grew up in Carlsbad, New Mexico; close to the Carlsbad Caverns!</p>
</details>
</section>
<footer>
<p id="footertext">
<img src="http://www.intro-webdesign.com/images/newlogo.png" alt="Intro to web design logo"/>
This page was created by Derin DeNio & Colleen van Lent. To learn more about web design, visit
<a href="http://www.intro-webdesign.com">Intro to Web Design</a>
</p>
</footer>
</body>
</html>任何见解都将不胜感激，感谢您抽出时间！！
css必须不同。
添加这一点会产生很大的不同：
h2 { margin: 0; }
并且还删除h2上的字体大小。