i making website myself , can't seem figure out why there small space between end of navigation bar , big picture (start of content).
i couldn't jsfiddle file work reason.
html:
<nav class="navbar navbar-default navbar-static-top" role="navigation"> <div class="container"> <!-- mobile navigation --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#"><img src="assets/images/logo1.png" alt=""></a> </a> </div> <div class="collapse navbar-collapse navbar-ex1-collapse"> <ul class="nav navbar-nav navbar-right"> <li><a href="index.html" class="hvr-underline-from-center">home</a></li> <li><a href="about.html" class="hvr-underline-from-center">about us</a></li> <li><a href="portfolio.html" class="hvr-underline-from-center">portfolio</a></li> <li><a href="contact.html" class="hvr-underline-from-center">contact</a></li> </ul> </div> </div> </nav> <!-- end navigation bar --> <header class="mainheader" style="background-image: url('http://www.menucool.com/slider/jsimgslider/images/image-slider-2.jpg');"> <div class="container"> <div class="sitecontent"> <h1>some awesome text site!</h1> </div> </div> </header> css:
body { background-color: #ece8e5; padding: 0 !important; margin: 0 !important; font-family: 'monda', sans-serif; text-align: center; } html { padding: 0 !important; margin: 0 !important; } .navbar-default { border-color: transparent !important; background-color: #303030 !important; height: 120px !important; } .navbar ul li { color: #ddd !important; font-size: 24px; padding-top: 45px; margin: 1 !important; font-weight: 400 !important; text-transform: uppercase; } .navbar ul li { padding-left: 12px !important; padding-right: 12px !important; } .navbar-brand img { width: 200px; margin-top: 3px; margin-left: 20px; position: relative; -ms-transform: rotate(-5deg); /* ie 9 */ -webkit-transform: rotate(-5deg); /* chrome, safari, opera */ transform: rotate(-5deg); } { margin: 0; padding: 0; } h1 { margin: 0 !important; padding: 0 !important; } .mainheader { margin: 0 !important; padding: 0 !important; } also note image being used not image website.
you don't mention it, looking @ code suppose using bootstrap. .navbar defined default 20px of bottom margin, should either customize bootstrap before compiling http://getbootstrap.com/customize/ or go 1 more css line
.navbar {margin-bottom:0;} you wrote
i couldn't jsfiddle file work reason
it did work me, i'm wondering if forgot include bootstrap css in "external resources" tab of jsfiddle
