I've been creating this one page, using containers and grids to have each row separate for reasons only the requester knows. What I'm sitting with at the moment, is that the first 4 containers align perfectly but the minute I try to add the 5th container, it sits to the right, and directly on top of the 4th container.
I've had to add quite a few <br>
in order to get it to sit below the 4th container and as you can see on this codepen: https://codepen.io/nyxerian/pen/wvoPMoz , the first 4 containers are at a margin-left:255px;
but the 5th container doesn't even have that property, and I've had to reduce the length of the container itself so that it doesn't scroll off to the right. Where its sitting now seems to be the 'start' of the page and I do not understand why.
I've added my code below and any insight as to how I can align them, and what the actual issue is would be most helpful.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="appOutcome.css">
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="https://use.fontawesome.com/releases/v5.15.2/js/all.js"></script>
</head>
<body>
<!-- start: SIDEBAR NAV AND HEADER -->
<div class='fixed header'>
<i class="far fa-bell" style="float: right; height: 35px; width: 35px; margin-top: 25px; margin-right: 80px; color: white;"></i>
<i class="far fa-comments" style="float: right; height: 35px; width: 35px; margin-top: 25px; margin-right: 20px; color: white;"></i>
</div>
<div class='fixed side'>
<img class="smartlogo" src="PNG1.png" alt="smart">
<nav class="sidebar">
<div class="text"></div>
<br>
<ul>
<li class="active"><a href="#"><i class="fas fa-home" style="color:#2DAAD6;"></i>   Home</a></li>
<li><a href="#"><i class="far fa-handshake fa-fw" style="color: #2DAAD6;"></i>   Sell</a></li>
<li><a href="#"><i class="fas fa-chart-line" style="color: #2DAAD6;"></i>   Dashboards</a></li>
<li><a href="#"><i class="fas fa-boxes" style="color: #2DAAD6;"></i>   Inventory</a></li>
<li><a href="#"><i class="far fa-credit-card" style="color: #2DAAD6;"></i>   Payments</a></li>
<li>
<a href="#" class="lead-btn"><i class="far fa-folder-open" style="color: #2DAAD6;"></i>   Leads</a>
<ul class="lead-show">
<li><a href="#">Referrals</a></li>
<li><a href="#"></i>Management</a></li>
<li><a href="#">Settings</a></li>
</ul>
</li>
<li><a href="#"><i class="fas fa-users" style="color: #2DAAD6;"></i>   Teams</a></li>
<li><a href="#"><i class="far fa-clipboard" style="color: #2DAAD6; margin-left: 7px;"></i>   Reporting</a></li>
<li><a href="#"><i class="fas fa-tools" style="color: #2DAAD6;"></i>   Settings</a></li>
</ul>
</nav>
</div>
<div class='scrollable'></div>
<!-- start: Bubble header -->
<div class="bubbleBar1">
<img class="bubbleBar1" src="/Leads/3. Leads Management - Qualifications/Qualifications - Appointment Outcome/bubbleBar2.1.png">
<br>
</div>
<div class="bubbleHeadings">
<div class="wrapper">
<div class="box">
<p>Qualifications</p>
</div>
<div class="box">
<p>Working</p>
</div>
<div class="box">
<p>Converted</p>
</div>
</div>
</div>
<!-- start: content -->
<br><br>
<form> <div class="refInfo">
<div class="wrapper2">
<div class="box1">
<p style="width: 150px;">Name & Surname</p>
<input type="text" class="fullName">
</div>
<div class="box2">
<p>Number</p>
<input type="text" class="mobileNum">
</div>
<div class="box3">
<p>Suburb</p>
<input type="text" class="suburb">
</div>
<div class="box4">
<p>City</p>
<input type="text" class="city">
</div>
</div>
</div>
<div class="outcomeInfo">
<div class="wrapper3">
<div class="box5">
<p>Date Contacted</p>
<input>
</div>
<div class="box6">
<p>Call Outcome</p>
<input>
</div>
<div class="box7">
<p>Comments</p>
<textarea name="commentNotes" id="commentNotes" rows="3" cols="30"></textarea>
</div>
</div>
</div>
</form>
<br>
<form>
<div class="appInfo">
<div class="wrapper4">
<div class="box8">
<p>Appointment Date</p>
<input type="date" class="appDate" style="width: 160px;">
</div>
<div class="box9">
<p>Time</p>
<input type="time" class="appTime" style="width: 160px;">
</div>
<div class="box10">
<p>Address</p>
<textarea name="address" id="address" rows="3" cols="30"></textarea>
</div>
<div class="box">
</div>
</div>
</form>
<br>
<form>
<br><br><br><br><br><br> <!-- Mass breaks to get it below the 4th container -->
<div class="appResult">
<div class="wrapper5">
<div class="box11">
<p>Appointment Result</p>
<select name="appOutcome" id="appOutcome" style="width: 165px; height: 24px;">
<option value="select">Select an Option</option>
<option value="purchase">Purchase</option>
<option value="reschedule">Reschedule Appointment</option>
<option value="notInterested">Not Interested</option>
</select>
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box12">
<div class="updateBtn">
<div class="updateBtn">
<button class="updateBtn">Update</button>
</div>
</div>
</form>
<script>
$('.lead-btn').click(function () {
$('nav ul .lead-show').toggleClass('show')
$('nav ul .first').toggleClass('rotate')
})
$('nav ul li').click(function () {
$(this).addClass('active').siblings().removeClass('active')
})
</script>
</body>
</html>
CSS
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
* {
margin: 0;
padding: 0;
user-select: none;
box-sizing: border-box;
font-family: 'nordstern', Helvetica;
}
/* ENSURING SCOLLABLE PAGE */
.scrollable {
width: 100%;
margin: 100px auto;
}
.fixed {
position: fixed;
}
/*HEADER AND SIDEBAR */
.header {
top: 0;
left: 0;
right: 0;
height: 80px;
background-image: linear-gradient(
to right,
#436c89,
#6ca1cd,
#60b9c0
) !important;
}
.smartlogo {
width: 140px;
height: 45px;
margin-left: 40px;
margin-top: 28px;
}
.side {
top: 0;
left: 0;
bottom: 0;
width: 240px;
background-color: #e7e6e6;
}
.sidebar {
height: 80%;
width: 240px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #e7e6e6;
margin-top: 85px;
}
.sidebar.show {
left: 0px;
}
.sidebar .text {
color: black;
font-size: 25px;
font-weight: 600;
line-height: 65px;
text-align: center;
justify-content: left;
background: #e7e6e6;
letter-spacing: 1px;
font-family: nordstern
}
nav ul {
background: #e7e6e6;
height: 100%;
width: 100%;
list-style: none;
}
nav ul li {
line-height: 60px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
nav ul li:last-child {
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
nav ul li a {
position: relative;
color: black;
text-decoration: none;
font-size: 18px;
padding-left: 40px;
font-weight: 500;
display: block;
width: 100%;
border-left: 3px solid transparent;
}
nav ul li.active a {
color: black;
background: #e7e6e6;
border-left-color: #60b9c0;
}
nav ul li a:hover {
background: #ffffff;
}
nav ul ul {
position: static;
display: none;
}
nav ul .lead-show.show {
display: block;
}
nav ul .serv-show.show1 {
display: block;
}
nav ul ul li {
line-height: 42px;
border-top: none;
}
nav ul ul li a {
font-size: 17px;
color: #e6e6e6;
padding-left: 80px;
}
nav ul li.active ul li a {
color: Black;
background: #e7e6e6;
border-left-color: transparent;
}
nav ul ul li a:hover {
color: black !important;
background: #ffffff !important;
}
nav ul li a span {
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
font-size: 22px;
transition: transform 0.4s;
}
nav ul li a span.rotate {
transform: translateY(-50%) rotate(-180deg);
}
/* BUBBLEBAR IMAGE STYLE */
.bubbleBar1 {
margin-left: 200px;
}
/* BUBBLE WORDING */
.bubbleHeadings {
margin-left: 255px;
display: flex;
justify-content: left;
width: 1250px;
height: 35px;
align-items: baseline;
background: white;
}
.wrapper {
width: 180px;
margin-left: 170px;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap:355px
}
/*----------------------Referral Information container-----------------------------------*/
.refInfo {
margin-left: 255px;
display: flex;
justify-content: left;
width: 1260px;
height: 120px;
align-items: baseline;
background: #F2F2F2;
}
.wrapper2 {
margin-top: 30px;
width: 150px;
margin-left: 20px;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 150px;
}
/*-----------------------Call Outcome container------------------------------------------*/
.outcomeInfo {
margin-left: 255px;
display: flex;
justify-content: left;
width: 1260px;
height: 120px;
align-items: baseline;
background: #F2F2F2;
}
.wrapper3 {
margin-top: 30px;
width: 150px;
margin-left: 20px;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 150px;
}
/*----------------------Appointment Date Container------------------------------------------*/
.appInfo {
margin-left: 255px;
display: flex;
justify-content: left;
width: 1260px;
height: 120px;
align-items: baseline;
background: #F2F2F2;
}
.wrapper4 {
margin-top: 30px;
width: 150px;
margin-left: 20px;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 150px;
}
/*-----------------------Appointment Result Container------------------------------------------*/
.appResult {
display: flex;
justify-content: left;
width: 1090px;
height: 120px;
align-items: baseline;
background: #F2F2F2;
}
.wrapper5 {
margin-top: 30px;
width: 150px;
margin-left: 20px;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 150px;
}
/* Enter and update Button Styling */
.updateBtn {
float: right;
margin-left: 50px;
width: 150px;
border-radius: 15px;
height: 35px;
border: none;
color: white;
background-color: #2DAAD6;
}
.updateBtn button:hover {
background-color: #60b9c0;
}
.box12 {
margin-left: 195px;
}