Hello everyone! I'm currently working on a website for one of my college projects, and I could really use some assistance. I seem to have two boxes touching each other when I actually want a small gap between them. Any help or suggestions would be greatly appreciated.
Thank you in advance. Here is the code snippet:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="style_sheet.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<div id="top">
<div class="logo"> </div>
</div>
<div id="menu">
<div class="button"> Home </div>
<div class="button"> Destinations </div>
<div class="button"> Make A Booking </div>
<div class="button"> Things To Do </div>
<div class="button"> Contact Us </div>
</div>
<div id="box">
content here
</div>
<div id="deal_one">
</div>
</body>
</html>
CSS
#wrapper
{
width: 80%;
position:relative;
margin: 0 auto;
}
#top
{
width:100% ;
height:200px;
background-color:rgba(0, 95, 160, 1);
border:solid 2px black;
position:relative;
}
#menu {
width: 100%;
height: 150px;
background-color: #fff;
border: solid 2px black;
text-align:center;
position: relative;
display: inline-block;
}
#box {
width:100% ;
min-height:500px;
background-color:rgba(0, 95, 160, 1);
margin-top:0;
border:solid 2px black;
position:relative;
}
.button {
font-family:Verdana, Geneva, sans-serif;
font-size:15pt;
display:inline-block;
margin: 0 auto;
margin-left:5%;
margin-right:5%;
margin-top:4.5%;
}
.logo {
position:relative;
background-image:url(../Images/Logo%203.png);
background-size:650px;
width:500px;
height:900px;
top:-30%;
display:inline-block;
z-index:500;
margin: 0 auto;
background-repeat:no-repeat;
margin-left:-10%;
}
#deal_one {
width:350px;
height:300px;
background-color:rgba(0, 95, 160, 1);
border: solid 2px black;
position:relative;
}