How to fit the nav bar with full page?-CodePudding

show the empty space, how to fit nav bar with full page?

(This is the code for nav bar )

        <ul type="none">
        <li> Home </li> 
        <li> News </li>
        <li> SignIn </li>
       </ul>
       <div>

CodePudding user response：

First of all <ul> has browser stylesheet where it already has margin/padding so do this

ul{
    margin:0;
    padding:0
}

also go for wrap them all in a <header> tag and all the navigation items in <nav> tag and add css property like this

header{
    position:fixed;
    inset:0;
    width:100vw;
}

and please dont wrap header with any other element except for body,html ofcourse

CodePudding user response：

Inside your head tags, add the below code between the <style> and </style> tags (or add them in any other CSS file which is linked to the target HTML file)

ul{
position: fixed; //or any other position you want. 
top: 0;
left: 0;
width: 100%;
margin : 0;
}