html - Navigation Bar won't extend to edge of webpage -


i'm trying navigation bar extend rest of page somehow looking this: current navigation bar.

additionally, can see there's white border on top , sides, there way fix? i've tried various ways not changing. appreciated!

html & css code:

     <html>         <head>           <style>      @import url(https://fonts.googleapis.com/css?family=lora);     <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">     <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=roboto+slab">          body {             margin: 0px;             padding: 0px;             }           .nav-bar-block {              margin: 0px;             padding: 0px;             overflow: hidden;             background-color: #f8f8f8;             background-size: cover;             border-bottom: 1px;             border-bottom-color: dimgray;             display: inline-block;          }          .nav-bar-block h1 {             text-align: center;             font-family: lora, sans-serif;             color: #4b4b4b;             font-size: 45px;             padding: 0px 400px;          }          .nav-bar-menu {             list-style-type: none;            }         </style>    </head>        <body>        <div class="nav-bar-block">          <h1>title</h1>       </div>      </body>   </html> 

if change .nav-bar-block

display: block; 

then you'll top full width (inline-block means things show next element block means take whole row of content).

        body {              margin: 0px;              padding: 0px;              }              .nav-bar-block {                margin: 0px;              padding: 0px;              overflow: hidden;              background-color: #f8f8f8;              background-size: cover;              border-bottom: 1px;              border-bottom-color: dimgray;              display: block;            }            .nav-bar-block h1 {              text-align: center;              font-family: lora, sans-serif;              color: #4b4b4b;              font-size: 45px;              padding: 0px 400px;            }            .nav-bar-menu {              list-style-type: none;              }
     <html>          <head>             <style>        @import url(https://fonts.googleapis.com/css?family=lora);      <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">      <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=roboto+slab">               </style>     </head>           <body>          <div class="nav-bar-block">           <h1>title</h1>        </div>       </body>     </html>


Comments

Popular posts from this blog

mysql - Dreamhost PyCharm Django Python 3 Launching a Site -

java - Sending SMS with SMSLib and Web Services -

java - How to resolve The method toString() in the type Object is not applicable for the arguments (InputStream) -