Problem adding <li> in the main Header of the website im practicing on
I m a beginner, I made a main-header in which I added a logo, a search box and a <li> with <a>. but everything shows up in awkward places, like the LI's. Also my main headers width is not 100% which I tried to fix but I am unable to do so. here is my code <!DOCTYPE html> <html> <head> <title> E-Commerce </title> <link href="./style.css" rel="stylesheet" type="text/css" > </head> <body> <div id="wrapper"> <div id="header"> <div id="subheader"> <div class="container"> <p> Shop Anywhere and everywhere</p> <a href="#">Help</a> <a href="#">Download App</a> <a href="#">Consumer</a> <a href="#">Guest</a> <a href="#"> Register</a> <!-- Main header --> <div id="main-header"> <!-- logo --> <div id="logo"> <span id="ist">Shop</span> <span id="iist">Locally</span> </div> <!-- Search Box --> <div id="Search"> <form action=""> <input class= "search-area" type="text" name="text" placeholder="Search here"> <input class="search-button" type="Submit" name="Submit" value="Search"> </form> </div> <!-- User-menue--> <div id="User-menue"> <li><a href="#">Cart</a></li> <li><a href="#">Login</a></li> </div> </div> </div> </div> </div> </div> </body> </html> here is the CSS #wrapper { font-family: tahoma; } .container { width: 90%; margin: 0 auto; } #subheader{ width: 100%; height: 30px; background: black; color: #fff; margin-top:-15px; } #subheader p{ float: left; margin-top:7px; } #subheader a { float: right; line-height: 30px; color: white; text-decoration: none; margin-left: 30px; } /* Logo Styling*/ #main-header { width: 110%; height: 100px; background: black; float: left; margin: 10 -15 0 -15; padding: 0; } #Logo { width: 250px; margin-top: 10px; float: left; } #ist { color: grey; font-size: 45px; font-weight: bold; margin-le
Often have questions like this?
Learn more efficiently, for free:
