I am currently building a website and my code has been fine until now. I have added a footer to my webpage and it shows. However, when I add a height it doesn't change at all. Instead it changes the footer to the colour white. I have also tried using a div and a section (just for testing purposes) but it is still the same result. Any help would be appreciated! Here is the code:
</head>
<body>
<header>
<img src="http://i300.photobucket.com/albums/nn18/ojijimanuel/arms_of_the_catholic_archdiocese_of_birmingham_by_petercrawford-d727h3u_zpscfv7es7q.png"/>
<h4 id="textlogo">St Philip Neri</h4>
<nav>
<ul>
<a href="#"><li>Home</li></a>
<a href="#"><li>Contact</li></a>
</ul>
</nav>
</header>
<section id="section1">
<h1 id="section1heading">Welcome to our multicultural society.</h1>
<h4 id="section1paragraph">Come worship with us.</h4>
</section>
<section id="section2">
<button type="button">View the Sunday Bulletin</button>
</section>
<section id="section3">
</section>
<section id="section4">
</section>
<footer>
</footer>
</body>
body{
margin:0px;
}
header{
background-color:#080808;
display: flex;
align-items:center; /* align vertical */
padding-top:10px;
padding-bottom:10px;
position:fixed;
width:100%;
z-index:1000;
}
img{
display:inline-block;
width:35px;
margin-left:100px;
}
#textlogo{
margin:0px;
color:white;
font-family: 'Roboto', sans-serif;
font-weight:700;
display:inline-block;
margin:10px;
}
a{
color:white;
list-style-type:none;
text-decoration:none;
font-family:roboto,sans-serif;
font-weight:500;
font-size:15px;
}
nav{
margin-left:auto;
margin-right:100px;
}
nav li{
display:inline;
padding:5px;
}
#section1{
background-image: url("http://i300.photobucket.com/albums/nn18/ojijimanuel/imageedit_4_6279316354_ zpsgbpfsvo1.jpg");
background-repeat:no-repeat;
background-size:100%;
background-position:center;
width:100%;
height:670px;
text-align:center;
display: flex;
align-items:center; /* align vertical */
justify-content:center;
flex-direction:column;
}
#section1heading{
color:white;
font-size:50px;
margin:0px;
font-family: 'Roboto', sans-serif;
font-weight:500;
display:block;
position:relative;
top:100px;
}
#section1paragraph{
color:white;
font-family:'Roboto', sans-serif;
font-weight:400;
font-size:20px;
position:relative;
top:100px;
}
#section2{
width:100%;
background-color:#cc1d00;
margin:0px;
padding-top:130px;
padding-bottom:130px;
text-align:center;
background-image: url("http://i300.photobucket.com/albums/nn18/ojijimanuel/imageedit_7_2748546790_ zpsc1alysjl.jpg");
background-position:center;
background-size:100%;
display: flex;
align-items:center; /* align vertical */
justify-content:center;
height:50px;
}
button{
text-align:center;
border-color:white;
color:white;
background-color:transparent;
border-style:solid;
font-size:25px;
font-family: Roboto, sans-serif;
font-weight:500;
border-width:3.5px;
padding:10px;
}
button{
cursor: pointer;
cursor: hand;
}
#section3{
width:50%;
height:600px;
background-color:blue;
float:left;
}
#section4{
width:50%;
height:600px;
background-color:red;
float:right;
}
#footer{
width:100%;
background-color:orange;
margin:0px;
height:500px;
}