我正在练习html和css，遇到了一个问题。我已经创建了一个页脚，我给了一个绿色的背景。在此之上，我想添加一个2列的布局，我做到了。但是当我看页面的时候，这个列有一个绿色的背景。我确保css不会在列中显示绿色背景，但没有运气。
<html>
<head>
<link rel="stylesheet" href="styles.css">
<Interdisciplinary Educational Institute>
</head>
<body>
<nav>
<ul>
<li class="nav-item">Home</li>
<li class="nav-item">About Us</li>
<li class="nav-item">Contact Us</li>
</ul>
</nav>
<h1 class="header"> Welcome to my page</h1>
<p class="paragraph"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<div>
<img class ="image" src="https://thumbs.dreamstime.com/b/humpty-dumpty-egg-sitting-brick-wall-42639011.jpg" alt="Humpty Dumpty">
</div>
<div class="row">
<div class="column">
<h3>Column 1</h3>
<p>This is the first column</p>
</div>
<div class="column">
<h3>Column 2</h3>
<p>This is the second column</p>
</div>
</div>
<footer>
<h2 class="footer-header">Contact Us</h2>
<p class="footer-paragraph">We are located at New baneswor, Kathmandu, Nepal</p>
</footer>
</body>
nav{
margin:0 auto;
background-color: grey;
}
.nav-item{
border-style:solid;
display:inline-block;
}
.header{
color:red;
text-align: center;
}
.paragraph{
color:white;
background-color:black;
font-weight: bold;
}
.image{
display:block;
margin-left: auto;
margin-right:auto;
}
.footer-header{
text-align:center;
}
.footer-paragraph{
text-align:center;
color: red;
}
.column{
float:left;
width: 33.33%;
}
footer{
background-color:green;
}
footer{
float:left;
width:100%;
}
nav{
margin:0 auto;
background-color: grey;
}
.nav-item{
border-style:solid;
display:inline-block;
}
.header{
color:red;
text-align: center;
}
.paragraph{
color:white;
background-color:black;
font-weight: bold;
}
.image{
display:block;
margin-left: auto;
margin-right:auto;
}
.footer-header{
text-align:center;
}
.footer-paragraph{
text-align:center;
color: red;
}
.column{
float:left;
width: 33.33%;
}
footer{
float:left;
background-color:green;
width:100%;
}<html>
<head>
<link rel="stylesheet" href="styles.css">
<Interdisciplinary Educational Institute>
</head>
<body>
<nav>
<ul>
<li class="nav-item">Home</li>
<li class="nav-item">About Us</li>
<li class="nav-item">Contact Us</li>
</ul>
</nav>
<h1 class="header"> Welcome to my page</h1>
<p class="paragraph"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<div>
<img class ="image" src="https://thumbs.dreamstime.com/b/humpty-dumpty-egg-sitting-brick-wall-42639011.jpg" alt="Humpty Dumpty">
</div>
<div class="row">
<div class="column">
<h3>Column 1</h3>
<p>This is the first column</p>
</div>
<div class="column">
<h3>Column 2</h3>
<p>This is the second column</p>
</div>
</div>
<footer>
<h2 class="footer-header">Contact Us</h2>
<p class="footer-paragraph">We are located at New baneswor, Kathmandu, Nepal</p>
</footer>
</body>设置页脚流
footer{
float:left;
background-color:green;
width:100%;
}