I want to change the header background red along the navigation menu. however, my html/css does not work as intended. can you tell me what I did wrong? I though that header selector is the container of my topnav section. not sure why changing background-color through header style doesn't do anything. if I put the bakcground-color under the .topnav a, there will be a gap between the floating elements
<head>
<style>
body {
box-sizing: border-box;
margin: 0;
background-color: #4c8b41;
}
header {
background-color: red;
}
.topnav a {
float: left;
color: #f8f8f8;
text-align: center;
text-decoration: none;
padding: 10px 10px;
}
.topnav a:hover {
background-color: black;
}
#topnav-right {
float: right;
}
</style>
</head>
<body>
<header>
<div class="topnav">
<a href="#"><h2>Home</h2></a>
<a href="#"><h2><input type="text" placeholder="Search"></h2></a>
<div id="topnav-right">
<a href="#"><h2>Log In</h2></a>
<a href="#"><h2>Sign Up</h2></a>
</div>
</div>
</header>
</body>
</html>
body {
box-sizing: border-box;
margin: 0;
background-color: #4c8b41;
}
header {
background-color: red;
height:100px;
}
.topnav a {
float: left;
color: #f8f8f8;
text-align: center;
text-decoration: none;
padding: 10px 10px;
}
.topnav a:hover {
background-color: black;
}
#topnav-right {
float: right;
}<html>
<head>
</head>
<body>
<header>
<div class="topnav">
<a href="#">
<h2>Home</h2>
</a>
<a href="#">
<h2><input type="text" placeholder="Search"></h2>
</a>
<div id="topnav-right">
<a href="#">
<h2>Log In</h2>
</a>
<a href="#">
<h2>Sign Up</h2>
</a>
</div>
</div>
</header>
</body>
</html>Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments