0

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

17th Aug 2018, 9:01 PM
Bipin Pandey
Bipin Pandey - avatar
2 Answers
+ 1
Hi Bipin Pandey I see you did not use an ordered list or a unordered list to indicate the <li> propper way to do that is to use <ol> or <ul> tags for example: <ol> <li></li> </ol> <ol> = ordered list <ul> = unordered list <li> = list item Hope this will fix your issue👍
17th Aug 2018, 11:24 PM
🌴Vincent Berger🌴
🌴Vincent Berger🌴 - avatar
0
Thanks, Vincent, it fixed the <li> situation but I'm still clueless about my main-header situation, you can see I have set the #main-header width to 110% but still it is in between with huge margins at both left and right sides. I am unable to fix it myself.
18th Aug 2018, 12:50 AM
Bipin Pandey
Bipin Pandey - avatar