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
Post a Comment