The contact section of my website has the same menu, however the logo still hovers in red although the class you mentioned before is applied, it's also applied in the right image with social media.
Also, I have a footer created which has no style, how can I align it to the center and have them ordered including the icons? (which cannot be seen)
* {
padding: 0;
margin: 0;
}
input[type=text],
select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=submit] {
width: 100%;
background-color: rgb(151, 37, 37);
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #9E1B2F;
}
.testform {
border-radius: 5px;
background-color: black;
padding: 10px;
font-family: calibri;
color: white;
width: 25%;
margin-top: 200px;
margin-left: 700px;
margin-bottom: 300px;
}
.logo {
display: flex;
padding: 6px;
border: 0;
margin-left: 350px;
margin-bottom: 0px;
justify-content: center;
}
.bbicons {
padding: 6px;
border: 0;
margin-left: 1650px;
margin-bottom: 5px;
margin-top: -60px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: black;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
font-size: 20px;
font-weight: bold;
border-style: dashed;
border-color: black;
border-radius: 20px;
height: 80px;
width: 1900px;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 10px 12px;
text-decoration: none;
border-style: none;
margin-left: 24px;
margin-top: 11px;
}
li a:hover {
background-color: #9E1B2F;
}
logo:hover {
background-color: transparent;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="./img/favicon.png">
<link rel="stylesheet" href="./css/style.css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Contact</title>
<body>
<div class="navigation active">
<ul>
<li><a href="./tours.html">Tours</a></li>
<li><a href="https://greenday.lnk.to/fatherofall">Listen to Music</a></li>
<li><a href="./contact.html">Contact</a></li>
<li><a href="#about">About</a></li>
<li>
<a href="./index.html"><img class="logo" src="./img/logo.jpg" alt="logo"></a>
</li>
<li>
<a class="bbicons"><img src="./img/bbicons.jpg"></a>
</li>
</ul>
</div>
<div class="testform">
<form action="/action_page.php">
<label for="fname">First Name</label>
<input type="text" id="fname" name="firstname" placeholder="Your name..">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lastname" placeholder="Your last name..">
<label for="country">Country</label>
<select id="country" name="country">
<option value="australia">Australia</option>
<option value="canada">Canada</option>
<option value="usa">USA</option>
</select>
<input type="submit" value="Submit">
</form>
</div>
<footer class="footer">
<div class="container">
<div class="row">
<div class="footer-col">
<h4><a class="textDecoration" href="./terms.html">Terms and Conditions</a></h4>
<h4><a class="textDecoration" href="./privacy.html">Privacy
and Policy</a></h4>
<h4>Follow Us</h4>
</div>
<div class="social-links">
<img src="./img/face4.png"></a>
<img src="./img/ig3.png"></a>
<img src="./img/tw2.png"></a>
<img src="./img/yt2.png"></a>
</div>
</div>
</div>
</footer>
</body>
</html>