eperjesikevin eperjesikevin - 1 month ago 10
CSS Question

Small White Space with jumbotron



As you see here my jumbo tron is not touching the nav bar. I'm having trouble with the CSS. How can i fix? What am i doing wrong? I been trying to fix it for a while now



body {
font-family: 'Lora', 'Times New Roman', serif;
background-color: #EBDBDF;
font-size: 20px;
color: #333333;
}
p {
line-height: 1.5;
margin: 30px 0;
}
p a {
text-decoration: underline;
}
.navbar-default {
background-color: #50494C;
}
.navbar-brand {
color: #fff !important;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav > .active > a:hover {
color: #fff;
text-transform: uppercase;
background-color: rgba(12, 184, 182, 0.21);
}
.navbar-default .navbar-nav > li > a {
color: #fff;
text-transform: uppercase;
font-size: 14px;
font-weight: 300;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: #fff;
text-transform: uppercase;
background-color: rgba(12, 184, 182, 0.21);
}
.affix .navbar-nav > li > a:hover,
.affix .navbar-nav > li > a:focus {
background-color: rgba(12, 184, 182) !important;
}
@media (max-width: 767px) {
.navbar-brand {
padding: 0;
}
}
.jumbotron {
margin-top: 25px;
margin-bottom: 5px;
padding: 20px;
}
footer {
padding: 50px 0 65px;
}
.b-search {
background: #50494C;
color: white;
padding: 60px 0;
margin-bottom: 20px;
}
.photo {
text-align: center;
}
.jumbotron-welcome {
margin-bottom: 45px;
}
.jumbotron-form {
margin-right: 150px;
color: white;
}
.search {
color: white;
position: relative;
text-align: center;
}
h3.text-center {
color: #fff;
}
.text-center {
text-align: center;
position: relative;
}
hr.botm-line {
height: 3px;
width: 60px;
background: #ffb737;
position: relative;
border: 0;
margin: 20px 0 20px 0;
}
.service-info {
margin-top: 50px;
float: right;
}
.icon-info {
float: right;
}
#state {
padding: 15px;
}
.content {
padding-top: 30px;
}
.heading {
position: relative;
text-align: center;
}
.heading:after {
left: 50%;
height: 3px;
width: 50px;
content: " ";
bottom: -35px;
margin-left: -25px;
position: absolute;
}
.heading h2 {
font-size: 40px;
font-weight: 500;
margin: 0 0 20px;
color: #444;
}
.heading p {
font-size: 16px;
font-weight: 300;
letter-spacing: 0.5px;
text-transform: uppercase;
color: #8693a7;
}
centered-form {
margin-top: 60px;
}
.text {
color: #ffffff !important;
}
.search {
color: orange !important;
}
.team-members {
width: 70%;
cursor: pointer;
overflow: hidden;
position: relative;
margin-bottom: 35px;
}
.team-members .team-avatar {
position: relative;
}
.team-members .team-avatar:after {
top: 0;
left: 0;
width: 100%;
height: 100%;
content: " ";
position: absolute;
background: rgba(129, 129, 129, 0.1);
transition-duration: 300ms;
transition-property: all;
transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
}
.team-members .team-avatar img {
display: block;
margin: 0 auto;
text-align: center;
}
.team-members .team-desc {
left: auto;
bottom: 0;
width: 100%;
padding: 0 20px;
position: absolute;
opacity: 0;
color: #fff;
-webkit-transform: translate3d(0, 10%, 0);
transform: translate3d(0, 10%, 0);
-webkit-transition: opacity 0.3s;
-moz-transition: opacity 0.3s;
-ms-transition: opacity 0.3s;
-o-transition: opacity 0.3s;
transition: opacity 0.3s;
}
.team-members .team-desc h4 {
font-size: 22px;
font-weight: 600;
margin: 0 0 10px;
color: #fff;
}
.team-members .team-desc span {
display: block;
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
color: #fff;
}
.team-members:hover .team-avatar:after {
background: rgba(47, 60, 72, 0.5);
transition-duration: 300ms;
transition-property: all;
transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
}
.team-members:hover .team-desc {
-webkit-transform: translate3d(0, -5%, 0);
transform: translate3d(0, -5%, 0);
-webkit-transform: translate3d(0, -10%, 0);
transform: translate3d(0, -10%, 0);
}
.team-members:hover .team-desc {
opacity: 1;
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
-ms-transition: all 0.4s;
-o-transition: all 0.4s;
transition: all 0.4s;
}
.list-inline>li {
padding: 0 10px 0 0;
}
.container-pad {
padding: 30px 15px;
}
.bgc-fff {
background-color: #fff!important;
}
.box-shad {
-webkit-box-shadow: 1px 1px 0 rgba(0, 0, 0, .2);
box-shadow: 1px 1px 0 rgba(0, 0, 0, .2);
}
.brdr {
border: 1px solid #ededed;
}
.fnt-smaller {
font-size: .9em;
}
.fnt-lighter {
color: #bbb;
}
.pad-10 {
padding: 10px!important;
}
.mrg-0 {
margin: 0!important;
}
.btm-mrg-10 {
margin-bottom: 10px!important;
}
.btm-mrg-20 {
margin-bottom: 20px!important;
}
.clr-535353 {
color: #535353;
}
@media only screen and (max-width: 991px) {
#property-listings .property-listing {
padding: 5px!important;
}
#property-listings .property-listing a {
margin: 0;
}
#property-listings .property-listing .media-body {
padding: 10px;
}
}
@media only screen and (min-width: 992px) {
#property-listings .property-listing img {
max-width: 180px;
}
}
.jumbotron {
background: #50494C;
color: #FFF;
border-radius: 0px;
}
.jumbotron-sm {
padding-top: 24px;
padding-bottom: 24px;
}
.jumbotron small {
color: #FFF;
}
.h1 small {
font-size: 24px;
}
#ceoimg {
width: 350px;
height: 400px;
padding-top: 40px;
padding: 40px 0;
border-radius: 70px;
}
/* Membership */

.panel {
text-align: center;
position: relative;
}
.panel:hover {
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4), 0 1px 5px rgba(130, 130, 130, 0.35);
}
.panel-body {
padding: 0px;
text-align: center;
}
.the-price {
background-color: rgba(220, 220, 220, .17);
box-shadow: 0 1px 0 #dcdcdc, inset 0 1px 0 #fff;
padding: 20px;
margin: 0;
}
.the-price h1 {
line-height: 1em;
padding: 0;
margin: 0;
}
.subscript / {
font-size: 25px;
}
footer {
font-size: 1.3em;
text-align: center;
padding: 18px;
color: #ffffff;
background: #222222;
}
footer a {
color: #ffffff;
}
footer a:hover {
color: #fefefe;
}

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Exective Business Brokers</title>
<!-- Latest compiled and minified CSS -->
<!-- Bootstarp Css-->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
<!-- different fonts css -->
<link href="css/main.css" rel="stylesheet">
<!-- main css file -->
<link href="css/animate.css" rel="stylesheet">

<!-------------------------->
</head>

<body>

<!-- Navigation -->
<nav class="navbar navbar-default">
<div class="container">
<div class="col-md-12">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Exective Business Brokers</a>
</div>

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="index.html">Home</a>
</li>
<li role="presentation" class="dropdown">

<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Buy a Business <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="aboutus.html">Register with EBB</a>
</li>
<li><a href="aboutus2.html">Tools</a>
</li>
<li><a href="service.html">Resources</a>
</li>
</ul>
</li>
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
List a Business <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="blog.html">List with EBB</a>
</li>
<li><a href="blogtwo.html">Open List with EBB</a>
</li>
<li><a href="blogone.html">Tools</a>
</li>
<li><a href="blogthree.html">Resources</a>
</li>
</ul>
</li>
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Services <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="portfolio.html">Services</a>
</li>
<li><a href="portfolioone.html">Financing</a>
</li>
<li><a href="portfoliotwo.html">Consulting</a>
</li>
<li><a href="portfoliothree.html">Preferred Buyers Program</a>
</li>
<li><a href="portfolio-details.html">Mergers and Acquisitions</a>
</li>
<li><a href="portfolio-details.html">Business Valuation</a>
</li>
</ul>
</li>

<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
About Us <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="About.html">About</a>
</li>
<li><a href="portfoliofour.html">Management</a>
</li>
<li><a href="portfolioone.html">Why EBB?</a>
</li>
<li><a href="portfoliotwo.html">Success</a>
</li>
<li><a href="portfoliothree.html">Broker Profiles</a>
</li>
<li><a href="portfolio-details.html"> Join EBB</a>
</li>
<li><a href="portfolio-details.html">Strategic Alliances</a>
</li>
</ul>
</li>
<li class="dropdown" id="menuLogin">
<a class="dropdown-toggle" href="#" data-toggle="dropdown" id="navLogin">Login</a>
<div class="dropdown-menu" style="padding:17px;">
<form class="form" id="formLogin">
<input name="username" id="username" type="text" placeholder="Username">
<input name="password" id="password" type="password" placeholder="Password">
<br>
<button type="button" id="btnLogin" class="btn">Login or Register</button>
</form>
</div>
</li>

<li class="dropdown" id="menuLogin">
<a class="dropdown-toggle" href="#" data-toggle="dropdown" id="navLogin">Call Us!</a>
<div class="dropdown-menu" style="padding:17px;">
<form class="form" id="formLogin">
<a class>1 (888) 851-9049</a>
</form>
</div>
</li>



</ul>
</div>
</div>
</div>

</nav>


<header class="jumbotron" style="background-image: url('img/home-bg.jpg')">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
<div class="site-heading">
<img src=/found6test/images/logo.png>
<hr class="small">
<span class="subheading">Welcome to Executive Business Brokers</span>
<p>Executive Business Brokers (EBB) has handled the sales and marketing efforts of over 1,000 small to mid-size businesses in the retail, distribution, manufacturing and service industries.</p>
<p>EBB has been bridging the gap between the buyers and sellers of businesses since 1985. With over 20,000 buyers, hundreds of businesses for sale at any one time and a knowledgeable and professional staff, our business is selling businesses.</p>
<p>Whether you’re looking to sell your business, buy a business or just need some advice, EBB offers the services that can help you achieve your goals.</p>
</div>
</div>
</div>
</div>
</header>




Answer
.navbar {
    margin-bottom: 0;
}

.jumbotron {
    margin-top: 0;
}

Will do the trick. Make sure margin-bottom of your Nav is 0 and margin-top of .jumbotron is 0 as well

Comments