Columns pulling css from footer-CodePudding

Im practicing html and css and running into an issue. I have created a footer which i have given a green background. Above that, I wanted to add a 2 column layout which i did. But when i look at the page the column has a green background. I made sure the css doesnt show the green background in the column but not having luck.

<html>
<head>  

<link rel="stylesheet" href="styles.css">

<Interdisciplinary Educational Institute>
</head>

<body>
<nav>
<ul>
   <li >Home</li>
   <li >About Us</li>
   <li >Contact Us</li>
</ul>
</nav>


<h1 > Welcome to my page</h1>

<p > 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 >
  <div >
  <h3>Column 1</h3>
  <p>This is the first column</p>
  </div>

  <div >
  <h3>Column 2</h3>
  <p>This is the second column</p>
  </div>
</div>

<footer>
  <h2 >Contact Us</h2>
  <p >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;
}

CodePudding user response：

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 >Home</li>
   <li >About Us</li>
   <li >Contact Us</li>
</ul>
</nav>


<h1 > Welcome to my page</h1>

<p > 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 >
  <div >
  <h3>Column 1</h3>
  <p>This is the first column</p>
  </div>

  <div >
  <h3>Column 2</h3>
  <p>This is the second column</p>
  </div>
</div>

<footer>
  <h2 >Contact Us</h2>
  <p >We are located at New baneswor, Kathmandu, Nepal</p>
</footer>

</body>

CodePudding user response：

Set Footer Flow

footer{
  float:left;
  background-color:green;
  width:100%;
 }