Html 中的文本显示不正确

Question

我是 html 和 css 的新手，我正在努力学习一些东西。我正在学习 Linda 的教程，我正在学习。我重复了一遍又一遍，似乎错误仍然存在。

该段落或

包含一些字词。页脚覆盖。如果不修改页脚的边距，页脚将在导航栏之后开始（现在有了边距，它开始的距离再远 5%）。我想做的是让页脚在段落之后开始。

请伸出援手。提前致谢。 HOW IT LOOKS HTML代码：

@charset "utf-8";
h1 {
 font-size: 2em;
 font-family: league-gothic;
 font-style: normal;
 font-weight: 400;
}
h2 {
 font-family: bitter;
 font-style: normal;
 font-weight: 400;
 font-size: 1.2em;
}
nav {
 background-color: #222325;
 color: #FFFFFF;
 text-align: center;
 margin-left: 5%;
 margin-right: 5%;
}
footer {
 text-align: center;
 color: #FFFFFF;
 background-color: #222325;
 font-size: x-small;
 margin-top: 5%;
 margin-right: 5%;
 margin-bottom: 5%;
 margin-left: 5%;
 padding-top: 5px;
 padding-bottom: 5px;
}




body {
 font-family: source-sans-pro;
 font-style: normal;
 font-weight: 200;
}
.assideLeft {
 width: 30%;
 margin-left: 5%;
 margin-right: 2.5%;
 float: left;
}
.sectionRight {
 width: 50%;
 margin-left: 2.5%;
 margin-right: 5%;
 float: right;
}

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link href="Styles.css" rel="stylesheet" type="text/css">
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.--><script>var __adobewebfontsappname__="dreamweaver"</script><script src="http://use.edgefonts.net/source-sans-pro:n2:default;league-gothic:n4:default;bitter:n4:default.js" type="text/javascript"></script>
</head>

<body>
<header>LADY M 
  <nav>Home About Fashion Contact </nav>
</header>
<aside class="assideLeft">
   <h1>Where fashion meets everyday standards.</h1>
</aside>

<section class="sectionRight">
 <h2>Woman News</h2>
<p>I am an economics student that is interested in fashion, mode, trending styles and woman's life style. I have a successful account at Polyvore, where I communicate with other people, check new trend, have fun and doing my part to make the world a more beautiful place.</p>
</section>

<footer>Copyright Alexandros Tsoskounoglou.</footer> 
</body>

</html>

Answer 1

这是您要找的吗？尝试删除

margin-left: 2.5%;
margin-right: 5%;
float: right;

右下.section

@charset "utf-8";
h1 {
 font-size: 2em;
 font-family: league-gothic;
 font-style: normal;
 font-weight: 400;
}
h2 {
 font-family: bitter;
 font-style: normal;
 font-weight: 400;
 font-size: 1.2em;
}
nav {
 background-color: #222325;
 color: #FFFFFF;
 text-align: center;
 margin-left: 5%;
 margin-right: 5%;
}
footer {
 text-align: center;
 color: #FFFFFF;
 background-color: #222325;
 font-size: x-small;
 margin-top: 5%;
 margin-right: 5%;
 margin-bottom: 5%;
 margin-left: 5%;
 padding-top: 5px;
 padding-bottom: 5px;
}




body {
 font-family: source-sans-pro;
 font-style: normal;
 font-weight: 200;
}
.assideLeft {
 width: 30%;
 margin-left: 5%;
 margin-right: 2.5%;
 float: left;
}
.sectionRight {
 width: 50%;
}

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link href="Styles.css" rel="stylesheet" type="text/css">
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.--><script>var __adobewebfontsappname__="dreamweaver"</script><script src="http://use.edgefonts.net/source-sans-pro:n2:default;league-gothic:n4:default;bitter:n4:default.js" type="text/javascript"></script>
</head>

<body>
<header>LADY M 
  <nav>Home About Fashion Contact </nav>
</header>
<aside class="assideLeft">
   <h1>Where fashion meets everyday standards.</h1>
</aside>

<section class="sectionRight">
 <h2>Woman News</h2>
<p>I am an economics student that is interested in fashion, mode, trending styles and woman's life style. I have a successful account at Polyvore, where I communicate with other people, check new trend, have fun and doing my part to make the world a more beautiful place.</p>
</section>

<footer>Copyright Alexandros Tsoskounoglou.</footer> 
</body>

</html>

Answer 2

使用

clear:both;

在您的页脚上。这是完整的文档 https://developer.mozilla.org/en-US/docs/Web/CSS/clear

Answer 3

@charset "utf-8";
h1 {
 font-size: 2em;
 font-family: league-gothic;
 font-style: normal;
 font-weight: 400;
}
h2 {
 font-family: bitter;
 font-style: normal;
 font-weight: 400;
 font-size: 1.2em;
}
nav {
 background-color: #222325;
 color: #FFFFFF;
 text-align: center;
 margin-left: 5%;
 margin-right: 5%;
}
footer {
 text-align: center;
 color: #FFFFFF;
 background-color: #222325;
 font-size: x-small;
 margin-top: 5%;
 margin-right: 5%;
 margin-bottom: 5%;
 margin-left: 5%;
 padding-top: 5px;
 padding-bottom: 5px;
    clear:both;

}




body {
 font-family: source-sans-pro;
 font-style: normal;
 font-weight: 200;
}
.assideLeft {
 width: 30%;
 margin-left: 5%;
 margin-right: 2.5%;
 float: left;
}
.sectionRight {
 width: 50%;
 margin-left: 2.5%;
 margin-right: 5%;
 float: right;
}

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link href="Styles.css" rel="stylesheet" type="text/css">
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.--><script>var __adobewebfontsappname__="dreamweaver"</script><script src="http://use.edgefonts.net/source-sans-pro:n2:default;league-gothic:n4:default;bitter:n4:default.js" type="text/javascript"></script>
</head>

<body>
<header>LADY M 
  <nav>Home About Fashion Contact </nav>
</header>
<aside class="assideLeft">
   <h1>Where fashion meets everyday standards.</h1>
</aside>

<section class="sectionRight">
 <h2>Woman News</h2>
<p>I am an economics student that is interested in fashion, mode, trending styles and woman's life style. I have a successful account at Polyvore, where I communicate with other people, check new trend, have fun and doing my part to make the world a more beautiful place.</p>
</section>

<footer>Copyright Alexandros Tsoskounoglou.</footer> 
</body>

</html>

Html 中的文本显示不正确

Text in Html does not show correctly

html

css

footer

sections