I am not using bootstrap, however I want to add a "Jumbotron" like div directly underneath my Nav.
There is a small white space between my nav bar and the div, however, and I can't figure out where it is getting the margin.
I have used the chrome element inspector, and there are no identified margins between them.
I have set the body tag to 0 margin and 0 padding, and I have tried adjusting various elements and tags to 0 and the only one that works is *, but I would like to avoid using star if possible.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="Display01.css">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<title>Display 01</title>
</head>
<body>
<!-- Ignore the nav - It is used to modeling purposes-->
<!-- Jump to line 27 -->
<nav>
<div class="toggle">
<h3>Logo</h3>
<i id="menu" class="fas fa-bars"></i>
</div>
<ul>
<li><a href="#"></a>Home</li>
<li><a href="#"></a>About</li>
<li><a href="#"></a>Services</li>
<li><a href="#"></a>Portfolio</li>
<li><a href="#"></a>Contact</li>
</ul>
</nav>
<!-- Begin Main Content -->
<div class="display"><p>Test</p></div>
<script type="text/javascript" src="Display01.js"></script>
</body>
</html>
.display {
margin-bottom: 2rem;
margin-top: 0;
background-color: #e9ecef;
padding-right: 0;
padding-left: 0;
border-radius: 0;
width: 100vw;
height: 50vh;
}
/*CSS Used for Navbar for Modeling Purposes*/
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
nav {
width: 100%;
background-color: #00316b;
color: #fff;
text-decoration: none;
overflow: auto;
}
ul {
width: 80%;
margin: 0 auto;
padding: 0;
}
ul li {
list-style: none;
display: inline-block;
padding: 20px;
font-weight: bold;
transition: 0.5s;
}
ul li:hover {
/*background-color: #e91e63;*/
background-color: white;
color: #000;
border-radius: 15px;
}
h3 {
float: left;
position:relative;
margin: 0 0 20px 10px;
}
.menu {
float: right;
}
.toggle {
width: 100%;
padding: 10px;
background-color: #00316b;
text-align: right;
box-sizing: border-box;
font-size: 30px;
display: none;
}
@media (max-width:768px){
.toggle {
display: block;
}
ul {
width: 100%;
display: none;
transition: 1.0s;
}
ul li {
display: block;
text-align: center;
}
.active {
display: block;
}
}
I would like for the Display Div to sit flush underneath the Nav bar with no white space.
I have been trying to figure this out for some time, and I greatly appreciate the help with it.
Aucun commentaire:
Enregistrer un commentaire