I am aiming for my website layout to have distinct margins between the left and right side of the content, as well as between the header and navbar. However, I do not want these spaces' colors to change to match the body's background color.
https://i.sstatic.net/tSCAU.png
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Template</title>
<link rel="stylesheet" type="text/css" href="<?php echo base_url();?>css/style.css">
</head>
<body>
<div id="wrapper">
<div id="header">
<h1><p></p></h1>
</div>
<div id="nav">
<ol>
<li><a href="<?php echo base_url();?>index.php/member">Home</a></li>
<li><a href="#">About us</a>
<ol>
<li><a href="#">History</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Other Items</a></li>
</ol>
<li><a href="#">Contact us</a></li>
</ol>
</div>
<div id="content">
<div id="left-side">
Content goes here
</div>
<div id="right-side">
<div class="loginbox">
<?php echo form_open('login');?>
<h2 style="text-align:center;"> Login </h2>
<ul id='login'>
<li>
<span style="margin-right:10px;">Username:</span><br>
<input type='text' name='username'>
</li>
<li>
Password:<br>
<input type='password' name='password'>
</li>
<br>
<li>
<input type='submit' name='btn2' value='Log in'>
</li>
<li>
<br>
<?php echo anchor("register/index","Register");?>
</li>
<li>
<?php echo anchor("", "Forgot Password");?>
</li>
</ul>
<?php echo form_close();?>
</div>
</div>
</div>
<div id="footer"><p>Footer</p></div>
</div>
</body>
CSS
html,body{margin:0px;padding:0px;font-size:13px;}
body{background:#cceeff;font-family:"verdana"; }
#wrapper{margin:auto;padding:0px;width:75%;background:#FFF;}
#header{margin:0px;padding:0px;width:100%;height:18vh;float:left;background:#99d6ff;}
#header h1{margin:0px;padding:0px;font-size:20px;padding-bottom:10px;}
#nav{margin:0px;padding:0px;width:100%;float:left;margin-top:10px;background: #80ffe5;}
#nav ol{list-style:none;margin:0px;padding:0px;}
#nav ol li{display:block;padding:6px 10px;float:left;position:relative;}
#nav ol a{display:block;padding:5px 10px;color:#000;text-decoration:none;}
#nav ol a:hover{background:#f2f2f2;
-webkit-transition: background-color 0.3s ease-out;
-moz-transition: background-color 0.3s ease-out;
-o-transition: background-color 0.3s ease-out;
transition: background-color 0.3s ease-out;
}
#nav ol ol{position:absolute;top:35px;left:0px;display:none;background: #80ffe5;}
#nav ol ol li{border-bottom:1px;}
#content{margin:0px;padding:0px;width:100%;display:flex;min-height:70vh;word-break: break-all;}
#right-side{float:left;margin-left:10px;width:30%;border: solid 1px grey;background:white;}
#right-side ol{list-style:none;}
#left-side{float:left;width:70%;border: solid 1px grey;background:white;}
#footer{float:left;margin:0px;padding:2vh;width:100%;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
background: #99d6ff;
}
.loginbox
{
background: #9999ff;
margin: 10px;
margin-top:20px;
padding: 5px;
border-radius: 5px;
}
.loginbox ul li
{
list-style:none;
margin-left:-10px;
}