Flexbox breaking on IE - html

I'm trying some layout stuff with flexbox, but in IE it never seems to work. I'm wondering what i'm doing wrong. I checked the bugs that are present with IE but I seem to be doing everything according to it.
<div class="main">
<div class="main-inner">
<div class="breadcrumb">
Beleza > Esponjas
</div>
<aside class="sidebar">
<h1 class="sidebar-heading">
Filtrar por
</h1>
<ul class="filter ul-reset">
<li class="filter-item">
<section class="filter-item-inner">
<h1 class="filter-item-inner-heading minus">
Cor
</h1>
<ul class="filter-attribute-list ul-reset">
<div class="filter-attribute-list-inner">
<li class="filter-attribute-item">
<input type="checkbox" id="colour-attribute-1" class="filter-attribute-checkbox ib-m">
<label for="colour-attribute-1" class="filter-attribute-label ib-m">
White
</label>
</li>
<li class="filter-attribute-item">
<input type="checkbox" id="colour-attribute-2" class="filter-attribute-checkbox ib-m">
<label for="colour-attribute-2" class="filter-attribute-label ib-m">
Lime
</label>
</li>
<li class="filter-attribute-item">
<input type="checkbox" id="colour-attribute-3" class="filter-attribute-checkbox ib-m">
<label for="colour-attribute-3" class="filter-attribute-label ib-m">
Biege
</label>
</li>
<li class="filter-attribute-item">
<input type="checkbox" id="colour-attribute-4" class="filter-attribute-checkbox ib-m">
<label for="colour-attribute-4" class="filter-attribute-label ib-m">
Khaki
</label>
</li>
<li class="filter-attribute-item">
<input type="checkbox" id="colour-attribute-5" class="filter-attribute-checkbox ib-m">
<label for="colour-attribute-5" class="filter-attribute-label ib-m">
Olive
</label>
</li>
<li class="filter-attribute-item">
<input type="checkbox" id="colour-attribute-6" class="filter-attribute-checkbox ib-m">
<label for="colour-attribute-6" class="filter-attribute-label ib-m">
Yellow
</label>
</li>
<li class="filter-attribute-item">
<input type="checkbox" id="colour-attribute-7" class="filter-attribute-checkbox ib-m">
<label for="colour-attribute-7" class="filter-attribute-label ib-m">
Gold
</label>
</li>
<li class="filter-attribute-item">
<input type="checkbox" id="colour-attribute-8" class="filter-attribute-checkbox ib-m">
<label for="colour-attribute-8" class="filter-attribute-label ib-m">
Sepia
</label>
</li>
<li class="filter-attribute-item">
<input type="checkbox" id="colour-attribute-9" class="filter-attribute-checkbox ib-m">
<label for="colour-attribute-9" class="filter-attribute-label ib-m">
Brown
</label>
</li>
<li class="filter-attribute-item">
<input type="checkbox" id="colour-attribute-10" class="filter-attribute-checkbox ib-m">
<label for="colour-attribute-10" class="filter-attribute-label ib-m">
Salmon
</label>
</li>
<li class="filter-attribute-item">
<input type="checkbox" id="colour-attribute-11" class="filter-attribute-checkbox ib-m">
<label for="colour-attribute-11" class="filter-attribute-label ib-m">
Coral
</label>
</li>
<li class="filter-attribute-item">
<input type="checkbox" id="colour-attribute-12" class="filter-attribute-checkbox ib-m">
<label for="colour-attribute-12" class="filter-attribute-label ib-m">
Red
</label>
</li>
<li class="filter-attribute-item">
<input type="checkbox" id="colour-attribute-13" class="filter-attribute-checkbox ib-m">
<label for="colour-attribute-13" class="filter-attribute-label ib-m">
Ruby
</label>
</li>
<li class="filter-attribute-item">
<input type="checkbox" id="colour-attribute-14" class="filter-attribute-checkbox ib-m">
<label for="colour-attribute-14" class="filter-attribute-label ib-m">
Plum
</label>
</li>
<li class="filter-attribute-item">
<input type="checkbox" id="colour-attribute-15" class="filter-attribute-checkbox ib-m">
<label for="colour-attribute-15" class="filter-attribute-label ib-m">
Violet
</label>
</li>
</div>
</ul>
</section>
</li>
</ul>
</aside>
<div class="product-grid">
<ul class="product-directive">
<li class="grid-product-box">
<div class="item">
<div class="product">
<div class="picture">
<a href="#" class="product-image">
<img src="img/esponja.jpg">
</a>
</div>
<div class="star-ratings-sprite">
<span class="rating"></span>
</div>
<a href="#" class="product-title-link">
<h4 class="product-title">Esponja</h4>
</a>
<div class="product-price">
<span>2.00 €</span>
</div>
<div class="product-buttons">
</div>
</div>
</div>
</li>
<li class="grid-product-box">
<div class="item">
<div class="product">
<div class="picture">
<a href="#" class="product-image">
<img src="img/cotton.jpg">
</a>
</div>
<div class="star-ratings-sprite">
<span class="rating"></span>
</div>
<a href="#" class="product-title-link">
<h4 class="product-title">Esponja</h4>
</a>
<div class="product-price">
<span>2.00 €</span>
</div>
<div class="product-buttons">
</div>
</div>
</div>
</li>
<li class="grid-product-box">
<div class="item">
<div class="product">
<div class="picture">
<a href="#" class="product-image">
<img src="img/cloth.jpg">
</a>
</div>
<div class="star-ratings-sprite">
<span class="rating"></span>
</div>
<a href="#" class="product-title-link">
<h4 class="product-title">Esponja</h4>
</a>
<div class="product-price">
<span>2.00 €</span>
</div>
<div class="product-buttons">
</div>
</div>
</div>
</li>
<li class="grid-product-box">
<div class="item">
<div class="product">
<div class="picture">
<a href="#" class="product-image">
<img src="img/esponja.jpg">
</a>
</div>
<div class="star-ratings-sprite">
<span class="rating"></span>
</div>
<a href="#" class="product-title-link">
<h4 class="product-title">Esponja</h4>
</a>
<div class="product-price">
<span>2.00 €</span>
</div>
<div class="product-buttons">
</div>
</div>
</div>
</li>
<li class="grid-product-box">
<div class="item">
<div class="product">
<div class="picture">
<a href="#" class="product-image">
<img src="img/cotton.jpg">
</a>
</div>
<div class="star-ratings-sprite">
<span class="rating"></span>
</div>
<a href="#" class="product-title-link">
<h4 class="product-title">Esponja</h4>
</a>
<div class="product-price">
<span>2.00 €</span>
</div>
<div class="product-buttons">
</div>
</div>
</div>
</li>
<li class="grid-product-box">
<div class="item">
<div class="product">
<div class="picture">
<a href="#" class="product-image">
<img src="img/cloth.jpg">
</a>
</div>
<div class="star-ratings-sprite">
<span class="rating"></span>
</div>
<a href="#" class="product-title-link">
<h4 class="product-title">Esponja</h4>
</a>
<div class="product-price">
<span>2.00 €</span>
</div>
<div class="product-buttons">
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
https://jsfiddle.net/y0yLnuw6/2/

Related

How to create a two column layout form?

Am I missing something here? Or is this not the right way to go about it? Please help me, have a look at this and tell me what's wrong here
/*--- FORM ----*/
.form-container {
width: 100%;
}
.form-container li {
display: block;
float: left;
width: 100%;
margin: 0 auto;
}
input,
select,
textarea {
width: 60%;
}
label {
text-align: left;
margin-left: 18px;
font-size: 100%;
}
<div class="row">
<form method="post" action="#" class="contact-form">
<div class="row">
<div class="col span-1-of-3">
<ul class="form-container">
<li class="form-features">
<label for="first-name">First name:</label>
</li>
</ul>
</div>
<div class="col span-2-of-3">
<ul class="form-container">
<li class="form-features">
<input type="text" name="first-name" id="first-name" required>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<ul class="form-container">
<li class="form-features">
<label for="last-name">Last name:</label>
</li>
</ul>
</div>
<div class="col span-2-of-3">
<ul class="form-container">
<li class="form-features">
<input type="text" name="last-name" id="last-name" required>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<ul class="form-container">
<li class="form-features">
<label for="business-email">Business email:</label>
</li>
</ul>
</div>
<div class="col span-2-of-3">
<ul class="form-container">
<li class="form-features">
<input type="email" name="business-email" id="business-email" required>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<ul class="form-container">
<li class="form-features">
<label for="phone-number">Phone number:</label>
</li>
</ul>
</div>
<div class="col span-2-of-3">
<ul class="form-container">
<li class="form-features">
<input type="text" name="phone-number" id="phone-number" required>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<ul class="form-container">
<li class="form-features">
<label for="company-name">Company name:</label>
</li>
</ul>
</div>
<div class="col span-2-of-3">
<ul class="form-container">
<li class="form-features">
<input type="text" name="company-name" id="company-name" required>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<ul class="form-container">
<li class="form-features">
<label for="cosize">Company size:</label>
</li>
</ul>
</div>
<div class="col span-2-of-3">
<ul class="form-container">
<li class="form-features">
<select name="cosize" id="cosize">
<option value="small" selected>1-100</option>
<option value="medium">101-2000</option>
<option value="large">2001+</option>
</select>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<ul class="form-container">
<li class="form-features">
<label>How did you find us? :</label>
</li>
</ul>
</div>
<div class="col span-2-of-3">
<ul class="form-container">
<li class="form-features">
<select name="find-us" id="find-us">
<option value="search" selected>Search engine</option>
<option value="friends">Friends</option>
<option value="ad">Advertisement</option>
<option value="other">Other</option>
</select>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<ul class="form-container">
<li class="form-features">
<label>Tell us what you wnat here</label>
</li>
</ul>
</div>
<div class="col span-2-of-3">
<ul class="form-container">
<li class="form-features">
<textarea name="message"></textarea>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<ul class="form-container">
<li class="form-features">
<label> </label>
</li>
</ul>
</div>
<div class="col span-2-of-3">
<ul class="form-container">
<li class="form-features">
<input type="submit" value="Send message">
</li>
</ul>
</div>
</div>
</form>
</div>
I have used the codes in my stylesheet to try and create a 2 column layout form, but it still doesn't work. Am i doing anything wrong here?
Am i missing something out, please help with this!

I've created a example for you using flexbox
I have removed your first row since you didn't need that and added css to the form and .row
/*--- FORM ----*/
.form-container {
width: 100%;
}
.form-container li {
display: block;
float: left;
width: 100%;
margin: 0 auto;
}
input,
select,
textarea {
width: 60%;
}
label {
text-align: left;
margin-left: 18px;
font-size: 100%;
}
form {
display: flex;
flex-wrap: wrap;
}
form .row {
width: 50%;
}
<form method="post" action="#" class="contact-form">
<div class="row">
<div class="col span-1-of-3">
<ul class="form-container">
<li class="form-features">
<label for="first-name">First name:</label>
</li>
</ul>
</div>
<div class="col span-2-of-3">
<ul class="form-container">
<li class="form-features">
<input type="text" name="first-name" id="first-name" required>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<ul class="form-container">
<li class="form-features">
<label for="last-name">Last name:</label>
</li>
</ul>
</div>
<div class="col span-2-of-3">
<ul class="form-container">
<li class="form-features">
<input type="text" name="last-name" id="last-name" required>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<ul class="form-container">
<li class="form-features">
<label for="business-email">Business email:</label>
</li>
</ul>
</div>
<div class="col span-2-of-3">
<ul class="form-container">
<li class="form-features">
<input type="email" name="business-email" id="business-email" required>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<ul class="form-container">
<li class="form-features">
<label for="phone-number">Phone number:</label>
</li>
</ul>
</div>
<div class="col span-2-of-3">
<ul class="form-container">
<li class="form-features">
<input type="text" name="phone-number" id="phone-number" required>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<ul class="form-container">
<li class="form-features">
<label for="company-name">Company name:</label>
</li>
</ul>
</div>
<div class="col span-2-of-3">
<ul class="form-container">
<li class="form-features">
<input type="text" name="company-name" id="company-name" required>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<ul class="form-container">
<li class="form-features">
<label for="cosize">Company size:</label>
</li>
</ul>
</div>
<div class="col span-2-of-3">
<ul class="form-container">
<li class="form-features">
<select name="cosize" id="cosize">
<option value="small" selected>1-100</option>
<option value="medium">101-2000</option>
<option value="large">2001+</option>
</select>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<ul class="form-container">
<li class="form-features">
<label>How did you find us? :</label>
</li>
</ul>
</div>
<div class="col span-2-of-3">
<ul class="form-container">
<li class="form-features">
<select name="find-us" id="find-us">
<option value="search" selected>Search engine</option>
<option value="friends">Friends</option>
<option value="ad">Advertisement</option>
<option value="other">Other</option>
</select>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<ul class="form-container">
<li class="form-features">
<label>Tell us what you wnat here</label>
</li>
</ul>
</div>
<div class="col span-2-of-3">
<ul class="form-container">
<li class="form-features">
<textarea name="message"></textarea>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<ul class="form-container">
<li class="form-features">
<label> </label>
</li>
</ul>
</div>
<div class="col span-2-of-3">
<ul class="form-container">
<li class="form-features">
<input type="submit" value="Send message">
</li>
</ul>
</div>
</div>
</form>

How to keep border across divs in bootstrap

I have a box on the left and a big div i want to wrap them with a border with a light color. I want the borter to be of square shape. How can i do this. I have also added the style of the progress bar incase if it helps. I want a border box with shade around the progress bar circle. I am using bootstrap version 4
border pic
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-3">
<span class="border">
<br><br><br>
<div class="progress blue">
<span class="progress-left">
<span class="progress-bar"></span>
</span>
<span class="progress-right">
<span class="progress-bar"></span>
</span>
<div class="progress-value">90%</div>
</div>
</span>
</span>
<br><br>
<div class="list-group">
Home
<div class="list-group-item">
List header
</div>
<div class="list-group-item">
<h4 class="list-group-item-heading">
List group item heading
</h4>
<p class="list-group-item-text">
...
</p>
</div>
<div class="list-group-item justify-content-between">
Help <span class="badge badge-secondary badge-pill">14</span>
</div> Home <span class="badge badge-light badge-pill">14</span>
</div>
</div>
<div class="col-md-9">
<br><br><br><br><br><br> <br><br><br>
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link " data-toggle="tab" href="">Brief Information</a>
</li>
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href=""> Work Experience </a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="">Education</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="">Voluntary Work</a>
</li>
</ul>
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1">
Email address
</label>
<input type="email" class="form-control" id="exampleInputEmail1" />
</div>
<div class="form-group">
<label for="exampleInputPassword1">
Password
</label>
<input type="password" class="form-control" id="exampleInputPassword1" />
</div>
<div class="form-group">
<label for="exampleInputFile">
File input
</label>
<input type="file" class="form-control-file" id="exampleInputFile" />
<p class="help-block">
Example block-level help text here.
</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox" /> Check me out
</label>
</div>
<button type="submit" class="btn btn-primary">
Submit
</button>
</form>
</div>
</div>
</div>
</div>
</div>

I just add few CSS, I hope it'll help you out. Thanks
.light-border {
border: 1px solid #ccc;
}
and add light-border in <div class="row light-border">.
.light-border {
border: 1px solid #ccc;
}
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="row light-border">
<div class="col-md-3">
<span class="border">
<br><br><br>
<div class="progress blue">
<span class="progress-left">
<span class="progress-bar"></span>
</span>
<span class="progress-right">
<span class="progress-bar"></span>
</span>
<div class="progress-value">90%</div>
</div>
</span>
</span>
<br><br>
<div class="list-group">
Home
<div class="list-group-item">
List header
</div>
<div class="list-group-item">
<h4 class="list-group-item-heading">
List group item heading
</h4>
<p class="list-group-item-text">
...
</p>
</div>
<div class="list-group-item justify-content-between">
Help <span class="badge badge-secondary badge-pill">14</span>
</div> Home <span class="badge badge-light badge-pill">14</span>
</div>
</div>
<div class="col-md-9">
<br><br><br><br><br><br> <br><br><br>
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link " data-toggle="tab" href="">Brief Information</a>
</li>
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href=""> Work Experience </a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="">Education</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="">Voluntary Work</a>
</li>
</ul>
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1">
Email address
</label>
<input type="email" class="form-control" id="exampleInputEmail1" />
</div>
<div class="form-group">
<label for="exampleInputPassword1">
Password
</label>
<input type="password" class="form-control" id="exampleInputPassword1" />
</div>
<div class="form-group">
<label for="exampleInputFile">
File input
</label>
<input type="file" class="form-control-file" id="exampleInputFile" />
<p class="help-block">
Example block-level help text here.
</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox" /> Check me out
</label>
</div>
<button type="submit" class="btn btn-primary">
Submit
</button>
</form>
</div>
</div>
</div>
</div>
</div>

Mobile platform website has horizontal scrollbar, how do I remove it?

When I load my website homepage on a mobile device there is an ability to move the screen left and right, if I move it left it bounces back into place, but if I move it right it bounces back but will leave about 5px margin of white space throughout the entire webpage container except for the navbar. I have no content that is pushing the website width or margin-right. I am using bootstrap, i will upload a code snippet but the best way to see the issue is going to the website, it also only shows up on mobile devices, I don't have the problem when testing mobile view with google chrome mobile view. This problem only occurs on my homepage webpage, no other webpage has the problem.
Website link: http://buildingims.com/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="theme-color" content="#0054a5" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="theme-color" content="#333">
<title>Inspection Software for the Professional - Link Inspect Pro</title>
<link rel="shortcut icon" href="assets/img/favicon.ico?v=3">
</head>
<body>
<div id="ms-preload" class="ms-preload">
<div id="status">
<div class="spinner">
<div class="dot1"></div>
<div class="dot2"></div>
</div>
</div>
</div>
<div class="ms-site-container">
<div class="modal modal-primary" id="ms-account-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog animated zoomIn animated-3x" role="document">
<div class="modal-content">
<div class="modal-header d-block shadow-2dp no-pb">
<button type="button" class="close d-inline pull-right mt-2" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true"> <i class="zmdi zmdi-close"></i> </span>
</button>
<div class="modal-title text-center">
<a href="index.html">
<img alt="The Best Home Inspection Software" src="assets/img/logo.png" style="height: 50px; width:350px;" />
</a>
<!-- <span class="ms-logo ms-logo-white ms-logo-sm mr-1">LIP</span> <h3 class="no-m ms-site-title">Link Inspect <span>Pro</span> </h3> -->
</div>
<div class="modal-header-tabs">
<ul class="nav nav-tabs nav-tabs-full nav-tabs-2 nav-tabs-primary" role="tablist">
<li class="nav-item" role="presentation">
<i class="zmdi zmdi-account"></i> Login
</li>
<!-- <li class="nav-item" role="presentation"> <i class="zmdi zmdi-account-add"></i> Register </li>-->
<li class="nav-item" role="presentation">
<i class="zmdi zmdi-key"></i> Account Recovery
</li>
</ul>
</div>
</div>
<div class="modal-body">
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade active show" id="ms-login-tab">
<form autocomplete="off">
<fieldset>
<div class="form-group label-floating">
<div class="input-group"> <span class="input-group-addon"> <i class="zmdi zmdi-account"></i> </span>
<label class="control-label" for="ms-form-user">Email</label>
<input type="text" id="ms-form-user" class="form-control" required>
</div>
</div>
<div class="form-group label-floating">
<div class="input-group"> <span class="input-group-addon"> <i class="zmdi zmdi-lock"></i> </span>
<label class="control-label" for="ms-form-pass">Password</label>
<input type="password" id="ms-form-pass" class="form-control" required>
</div>
</div>
<div class="row mt-2">
<div class="col-md-6">
<div class="checkbox">
<label>
<input type="checkbox">Remember Me</label>
</div>
</div>
<div class="col-md-6">
<button class="btn btn-raised btn-primary pull-right">Login</button>
</div>
</div>
</fieldset>
</form>
<div class="text-center">
</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="ms-recovery-tab">
<form>
<fieldset>
<div class="form-group label-floating">
<div class="input-group"> <span class="input-group-addon"> <i class="zmdi zmdi-email"></i> </span>
<label class="control-label" for="ms-form-email-re">Email</label>
<input type="email" id="ms-form-email-re" class="form-control" required/>
</div>
</div>
<button class="btn btn-raised btn-block btn-primary">Send Password</button>
</fieldset>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<header class="ms-header ms-header-primary">
<div class="container container-full">
<div class="ms-title">
<a href="index.html">
<img alt="Link Inspect Pro Best Inspection Software" src="assets/img/logo.png" style="height:45px; width:350px;" />
</a>
</div>
<div class="header-right">
</div>
</div>
</header>
<nav class="navbar navbar-expand-md navbar-static ms-navbar ms-navbar-primary">
<div class="container container-full">
<div class="navbar-header" style="max-width:280px;">
<a class="navbar-brand" href="index.html">
<img alt="The Best Inspection Software 2018" src="assets/img/logo.png" style="width:100%; height:70%; " />
</a>
</div>
<div class="collapse navbar-collapse" id="ms-navbar">
<ul class="navbar-nav">
<li class="nav-item"> About Us
</li>
<li class="nav-item"> Features
</li>
<li class="nav-item dropdown"> Industry <i class="zmdi zmdi-chevron-down"></i>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="inspection-home.html">Home Inspection</a>
</li>
<li>
<a class="dropdown-item" href="inspection-compliance.html">Compliance Inspection</a>
</li>
<li>
<a class="dropdown-item" href="page-coming.html">Commercial Inspection</a>
</li>
<li>
<a class="dropdown-item" href="page-coming.html">Environmental Inspection</a>
</li>
<li>
<a class="dropdown-item" href="page-coming.html">Insurance Inspection</a>
</li>
</ul>
</li>
<li class="nav-item"> Contact
</li>
<li class="nav-item"> Login
</li>
<li class="nav-item">
Free Trial
</li>
</ul>
</div>
<a href="javascript:void(0)" class="ms-toggle-left btn-navbar-menu"> <i class="zmdi zmdi-menu"></i>
</a>
</div>
</nav>
<header class="ms-hero-page ms-hero-img-keyboard ms-hero-bg-dark color-white">
<div class="container index-1">
<div class="row">
<div class="col-lg-12">
<h1 class="text-uppercase typed-title">Inspection Software for the Professional <br><span class="color-primary typed-class"></span> </h1>
<p class="lead lead-sm color-light">Link Inspect Pro is a cloud based, comprehensive software that allows you to perform inspections, create reports, and keep your company organized.</p>
<ul class="ms-list-arrow">
<li>High-Speed servers and performance.</li>
<li>Comprehensive Software.</li>
<li>Professional Reports.</li>
<li>Perform Inspections.</li>
</ul>
</div>
<div class="col-lg-12 text-center">
Sign Up for Free Trial
Become a Network Inspector
</div>
</div>
</div>
</header>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="text-center ms-margin">
<a href="javascript:void(0)" class="btn btn-primary btn-raised btn-app" style="width:20%; min-width:200px">
<div class="btn-container"> <i class="fab fa-google-play"></i> <span style="text-transform:uppercase;">Get it on</span>
<br><strong>Google Play</strong>
</div>
</a>
<a href="javascript:void(0)" class="btn btn-primary btn-raised btn-app" style="width:20%; min-width:200px">
<div class="btn-container"> <i class="fa fa-apple"></i> <span>Download on the </span>
<br><strong>App Store</strong>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="container">
<section>
<h1 class="right-line">Features</h1>
<div class="row">
<div class="col-lg-4 col-md-6 col-sm-6 mb-2">
<div class="ms-icon-feature">
<div class="ms-icon-feature-icon rotate-icon"> <span class="ms-icon ms-icon-lg ms-icon-inverse"> <i class="fa fa-cloud"></i> </span>
</div>
<div class="ms-icon-feature-content">
<h4 class="color-primary">Cloud Hosting</h4>
<p>Hosted on AWS, data is synced and stored through the cloud so you can access all your data on any device with any network at any location.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 mb-2">
<div class="ms-icon-feature">
<div class="ms-icon-feature-icon rotate-icon"> <span class="ms-icon ms-icon-lg ms-icon-inverse"> <i class="fa fa-clipboard"></i> </span>
</div>
<div class="ms-icon-feature-content">
<h4 class="color-primary">Professional Reports</h4>
<p>Sleek & Professional reports can be customized to ones own preference. As well as, delivere the report directly to the customer without ever leaving the site.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 mb-2">
<div class="ms-icon-feature">
<div class="ms-icon-feature-icon rotate-icon"> <span class="ms-icon ms-icon-lg ms-icon-inverse"> <i class="fa fa-tablet"></i> </span>
</div>
<div class="ms-icon-feature-content">
<h4 class="color-primary">Mobile and Tablet Apps</h4>
<p>Link Inspect Pro apps for mobile devices allow seemless inspections to be done on site. Making inspections not only easy but quicker.</p>
</div>
</div>
</div>
</div>
<h1 class="right-line">Inspections</h1>
<div class="row">
<div class="col-lg-4 col-md-6 col-sm-6 mb-1">
<div class="ms-icon-feature">
<div class="ms-icon-feature-icon rotate-icon"> <span class="ms-icon ms-icon-lg ms-icon-inverse"> <i class="fa fa-shield"></i> </span>
</div>
<div class="ms-icon-feature-content">
<h4 class="color-primary">Request Inspection</h4>
<p>Never lose any information again with lead and quote tNever lose any information again with lead and quote tNever lose any information again with lead and quote t</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 mb-1">
<div class="ms-icon-feature">
<div class="ms-icon-feature-icon rotate-icon"> <span class="ms-icon ms-icon-lg ms-icon-inverse"> <i class="fa fa-bars"></i> </span>
</div>
<div class="ms-icon-feature-content">
<h4 class="color-primary">Find an Inspector</h4>
<p>Never lose any information again with lead and quoteNever lose any information again with lead and quote tNever lose any information again with lead and quote t.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6">
<div class="ms-icon-feature">
<div class="ms-icon-feature-icon rotate-icon"> <span class="ms-icon ms-icon-lg ms-icon-inverse"> <i class="fa fa-cog"></i> </span>
</div>
<div class="ms-icon-feature-content">
<h4 class="color-primary">Inspector Network</h4>
<p>Create and edit templates, contract language, contactNever lose any information again with lead and quote tNever lose any information again with lead and quote t</p>
</div>
</div>
</div>
</div>
</section>
</div>
<div class="wrap wrap-mountain">
<div class="container">
<h2 class="text-center text-light mb-6">Inspection Software created with <strong>You</strong> in Mind</h2>
<div class="row">
<div class="col-lg-6 order-lg-2 mb-4 center-block">
<img src="assets/img/demo/mock.png" alt="Link Inspect Pro Best Inspection Software" class="img-fluid center-block" style="max-height:400px">
</div>
<div class="col-lg-6 order-lg-1 pr-6">
<div class="text-center"> Learn More about LIP <i class="zmdi zmdi-arrow-right"></i>
</div>
</div>
</div>
</div>
</div>
<div class="container mt-6 mb-1">
<h2 class="text-center text-dark mb-6">Inspector Network</h2>
<div class="row">
<div class="col-lg-6 order-lg-2 pr-6">
</div>
<div class="col-lg-6 order-lg-1 mb-4 center-block">
<img src="assets/img/demo/mock.png" alt="Link Inspect Pro Best Inspection Software" class="img-fluid center-block" style="max-height:400px">
</div>
</div>
</div>
<style>
.trial-block{background: url(assets/img/black_wall.png) no-repeat fixed; background-size: cover; background-position: center center !important; padding: 80px 0;}.trial-form-block{background: #fff; border-radius: 4px; margin: 0 auto; max-width: 600px; padding: 35px; width: 100%;}
</style>
<section id="free-trial">
<div class="trial-block">
<div class="trial-form-block">
<div class="text-center">
<h2>Link Inspect Pro Trial</h2>
<p>Use Link Inspect Pro Software for 30 days or complete 3 inspections before subscribing</p>
</div>
<form action="https://linkinspectpro.com/users/registration" method="post" accept-charset="utf-8" name="registration_form" id="registration_form">
<div class="row">
<div class="col-sm-6">
<div class="form-group row label-floating">
<label class="control-label" for="firstname">First Name</label>
<input type="text" name="firstname" value="" id="firstname" class="form-control" maxlength="50" required/>
</div>
<div class="form-group row label-floating">
<label class="control-label" for="lastname">Last Name</label>
<input type="text" name="lastname" value="" id="lastname" class="form-control" maxlength="50" required/>
</div>
<div class="form-group row label-floating">
<label class="control-label" for="email">Email</label>
<input type="text" name="email" value="" id="email" maxlegth="150" class="form-control" required/>
</div>
<div class="form-group row label-floating">
<label class="control-label" for="password">Password</label>
<input type="password" name="password" value="" id="password" maxlength="40" class="form-control" required/>
</div>
<div class="form-group row label-floating">
<label class="control-label" for="passconf">Confirm Password</label>
<input type="password" name="passconf" value="" id="passconf" maxlength="40" class="form-control" required/>
</div>
<div class="form-group row label-floating">
<label class="control-label" for="mobile_number">Phone Number</label>
<input type="number" (keypress)="checkIfNumber($event)" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" name="mobile_number" value="" id="mobile_number" class="form-control" maxlength="12" required/>
</div>
<div class="form-group row" style="margin-top:1px">
<select name="timezone" id="timezone" class="form-control selectpicker" data-live-search="true" data-dropup-auto="false" required>
</select>
</div>
</div>
<div class="col-sm-6">
<div class="form-group row" style="margin-top:6px">
<select id="country" name="country" class="form-control selectpicker" data-live-search="true" data-dropup-auto="false" required>
<option value="" disabled selected>Please Select a Country</option>
<option value="227">United States</option>
<option value="39">Canada</option>
</select>
</div>
<div class="form-group row label-floating">
<label class="control-label" for="address1">Address 1</label>
<input type="text" name="address1" value="" id="address1" class="form-control" required/>
</div>
<div class="form-group row label-floating">
<label class="control-label" for="address2">Address 2</label>
<input type="text" name="address2" value="" id="address2" class="form-control" />
</div>
<div class="form-group row label-floating">
<label class="control-label" for="city">City</label>
<input type="text" name="city" value="" id="city" class="form-control" required/>
</div>
<div class="form-group row" style="margin-top:4px">
<select name="state" id="state" class="form-control selectpicker" data-live-search="true" data-dropup-auto="false" required>
<option value="" disabled selected>Please Select a State</option>
</div>
<div class="form-group row label-floating">
<label class="control-label" for="zipcode">Zipcode</label>
<input type="text" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" name="zipcode" value="" id="zipcode" class="form-control" maxlength="10" required/>
</div>
</div>
</div>
<div class="checkbox text-center" style="margin-top:20px;">
</div>
<div class="text-center" style="margin-top:19px;">
<button name="mysubmit" type="submit" id="mysubmit" title="Start Trial" class="btn btn-warning btn-raised mr-1" value="submit">Start Trial</button>
</div>
</form>
</div>
</div>
</section>
<section class="pricing-table">
<div class="container">
<div class="block-heading">
<h1>Payment Plan</h1>
<p>Subscribe for unlimited benefits.</p>
</div>
<div class="row no-gutters">
<div class="col-lg-3">
</div>
<div class="col-lg-6">
<div class="price-table price-table-info center prominent">
<div class="item"> <div class="ribbon">Subscribe</div>
<header class="price-table-header">
<h3> <sup>$</sup>30.00 <sub>/mo.</sub> </h3>
</header></div>
<div class="price-table-body">
<ul class="price-table-list">
<li> Cloud hosting and synchronization.<i class="fas fa-check" style="float: right;"></i></li>
<li> 3 free inspections included.<i class="fas fa-check" style="float: right;"></i></li>
<li> Create custom inspection workflows.<i class="fas fa-check" style="float: right;"></i></li>
<li> 2GB storage.<i class="fas fa-check" style="float: right;"></i></li>
<li> Additional inspections only $10 each.<i class="fas fa-check" style="float: right;"></i></li>
</ul>
<div class="text-center">
Buy now
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<aside class="ms-footbar">
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 ms-footer-col">
<div class="ms-footbar-block text-center">
<div class="ms-footbar-block">
<div class="ms-footbar-title">
<ul class="list-inline">
<li class="list-inline-item">
Home
</li>
<li class="list-inline-item">
|
</li>
<li class="list-inline-item">
About
</li>
<li class="list-inline-item">
|
</li>
<li class="list-inline-item">
Features
</li>
<li class="list-inline-item">
|
</li>
<li class="list-inline-item">
Contact
</li>
<li class="list-inline-item">
|
</li>
<li class="list-inline-item">
Login
</li>
<li class="list-inline-item">
|
</li>
<li class="list-inline-item">
Register
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12 col-lg-12 text-center text-md-center">
<ul class="list-inline">
<li class="list-inline-item">
Terms of Use
</li>
<li class="list-inline-item">
|
</li>
<li class="list-inline-item">
Privacy Policy
</li>
</ul>
</div>
</div>
</div>
</aside>
<footer class="ms-footer">
<div class="container">
<p>© Copyright 2018. <br>All Rights Reserved by BIMS Corp</p>
</div>
</footer>
<div class="btn-back-top">
<a href="#" data-scroll id="back-top" class="btn-circle btn-circle-primary btn-circle-sm btn-circle-raised "> <i class="zmdi zmdi-long-arrow-up"></i>
</a>
</div>
</div>
<div class="ms-slidebar sb-slidebar sb-left sb-style-overlay" id="ms-slidebar">
<div class="sb-slidebar-container">
<header class="ms-slidebar-header">
<div class="ms-slidebar-login">
<i class="zmdi zmdi-account"></i> Login
<i class="zmdi zmdi-account-add"></i> Register
</div>
<div class="ms-slidebar-title">
<div class="ms-slidebar-t">
<h3>Link Inspect <span>Pro</span> </h3>
</div>
</div>
</header>
<ul class="ms-slidebar-menu" id="slidebar-menu" role="tablist" aria-multiselectable="true">
<li>
<a class="link" href="index.html">Home</a>
</li>
<li>
<a class="link" href="page-about.html">About Us</a>
</li>
<li>
<a class="link" href="page-features.html">Features</a>
</li>
<li class="card" role="tab" id="sch6">
<a class="collapsed" role="button" data-toggle="collapse" href="#sc6" aria-expanded="false" aria-controls="sc6">Industry</a>
<ul id="sc6" class="card-collapse collapse" role="tabpanel" aria-labelledby="sch6" data-parent="#slidebar-menu">
<li>
<a class="dropdown-item" href="inspection-home.html">Home Inspection</a>
</li>
<li>
<a class="dropdown-item" href="inspection-compliance.html">Compliance Inspection</a>
</li>
<li>
<a class="dropdown-item" href="page-coming.html">Commercial Inspection</a>
</li>
<li>
<a class="dropdown-item" href="page-coming.html">Environmental Inspection</a>
</li>
<li>
<a class="dropdown-item" href="page-coming.html">Insurance Inspection</a>
</li>
</ul>
</li>
<li>
<a class="link" href="page-contact.html">Contact Us</a>
</li>
</ul>
<div class="ms-slidebar-social ms-slidebar-block">
<h4 class="ms-slidebar-block-title">Social Links</h4>
<div class="ms-slidebar-social">
</div>
</div>
</div>
</div>
</body>
</html>

only because you have a padding of 35px on the class .trial-form-block, you have to take care of it on mobile screens with smaller values using media queries

Col 6 Panels Alignment Issues

First experience with bootstrap. Want 2 panels next to each other using the col-lg-6 class. Left panel will be a link to an article while holding an image. Right will be a signup/login box.
When loading the site the 2 panel goes underneath?
<div class="row">
<div class="col-lg-6">
<h2>Lastest News</h2>
<p>Article</p>
<div class="panel panel-default">
<div class="panel-heading">Panel Header</div>
<div class="panel-body"><img class="img-responsive" src="images/warning.png"</div>
</div>
</div>
<div class="col-lg-6">
<form action="/action_page.php">
<h2>Buy, Sell and more deals!</h2>
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<ul class="nav navbar-nav navbar-center">
<li>
<button class="navbutton">
Login
</button>
</li>
<li>
<p> Not with us yet? </p>
</li>
<li>
<button class="navbutton">
Sign Up
</button>
</li>
</ul>
</form>
</div>
</div>
</div>
This is all inside a container.
Before adding img
After adding img

Please use this HTML
<div class="row">
<div class="col-lg-6">
<h2>Lastest News</h2>
<p>Article</p>
<div class="panel panel-default">
<div class="panel-heading">Panel Header</div>
<div class="panel-body">
<img class="img-responsive" src="images/warning.png"/>
</div>
</div>
</div>
<div class="col-lg-6">
<form action="/action_page.php">
<h2>Buy, Sell and more deals!</h2>
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<ul class="nav navbar-nav navbar-center">
<li>
<button class="navbutton">
Login
</button>
</li>
<li>
<p> Not with us yet? </p>
</li>
<li>
<button class="navbutton">
Sign Up
</button>
</li>
</ul>
</form>
</div>
</div>

Issue with div closing, it's href is spilling to other content

I have a site I'm making and there's a div from my nav bar that seems to be spilling out.
If I hover anywhere but the header and footer it's as though I'm hovering over a link. Can't seem to see what the issue is.It appears to be from my login button as that's the href shown when hovering over the content but I've gone through my code and can't see an un-closed div.
Would really appreciate some help with this one, it's wrecking my head.
Here's my Fiddle Images are placeholders in lieu of my ones but are the same size approx.
<body>
<div class="page-wrap">
<header class="topbar topbar-grey">
<div class="topbar-left">
<div class="topbar-logo">
<a href="/">
<img class="mysite-logo" src="http://lorempixel.com/output/cats-q-c-128-128-6.jpg" alt="Mysite Logo" />
</a>
</div>
</div>
<nav class="topbar-nav">
<ul class="topbar-nav-main">
<li id="home-nav">Home</li>
<li id="about-nav">About</li>
<li id="contact-nav">Contact</li>
<li id="gallery-nav">Gallery</li>
<li id="comissions-nav">Comissions</li>
</ul>
<div class="topbar-right">
<div class="hamburger"><img src="http://lorempixel.com/output/food-q-c-48-48-1.jpg"></div>
<div class="hamburger3"><img src="http://lorempixel.com/output/food-q-c-48-48-1.jpg"></div>
<div class="hamburger2"><a href="login.html">Login</div>
</div>
</nav>
</header>
<div class="contentstuff">
<div class="col col1">
<div class="box1">
<div id="box-image">
</div>
</div>
<div class="box3">
<div id="box-image2">
</div>
</div>
</div>
<div class="col col2">
<div class="box2">
<div id="slideshow-wrap">
<input type="radio" id="button-1" name="controls" checked="checked"/>
<label for="button-1"></label>
<input type="radio" id="button-2" name="controls"/>
<label for="button-2"></label>
<input type="radio" id="button-3" name="controls"/>
<label for="button-3"></label>
<input type="radio" id="button-4" name="controls"/>
<label for="button-4"></label>
<input type="radio" id="button-5" name="controls"/>
<label for="button-5"></label>
<input type="radio" id="button-6" name="controls"/>
<label for="button-6"></label>
<input type="radio" id="button-7" name="controls"/>
<label for="button-7"></label>
<input type="radio" id="button-8" name="controls"/>
<label for="button-8"></label>
<input type="radio" id="button-9" name="controls"/>
<label for="button-9"></label>
<input type="radio" id="button-10" name="controls"/>
<label for="button-10"></label>
<div id="slideshow-inner">
<ul>
<li id="slide1">
<img src="http://lorempixel.com/output/animals-q-c-550-550-10.jpg" />
</li>
<li id="slide2">
</li>
<li id="slide3">
<img src="http://lorempixel.com/output/animals-q-c-550-550-10.jpg" />
</li>
<li id="slide4">
<img src="http://lorempixel.com/output/animals-q-c-550-550-10.jpg" />
</li>
<li id="slide5">
<img src="http://lorempixel.com/output/animals-q-c-550-550-10.jpg" />
</li>
<li id="slide6">
<img src="http://lorempixel.com/output/animals-q-c-550-550-10.jpg" />
</li>
<li id="slide7">
</li>
<li id="slide8">
<img src="http://lorempixel.com/output/animals-q-c-550-550-10.jpg" />
</li>
<li id="slide9">
<img src="http://lorempixel.com/output/animals-q-c-550-550-10.jpg" />
</li>
<li id="slide10">
<img src="http://lorempixel.com/output/animals-q-c-550-550-10.jpg" />
</li>
</ul>
</div>
</div>
</div>
<div class="box4">
<div id="box-image3">
</div>
</div>
</div>
</div>
<footer class="site-footer">
<div class="row-1">
<div class="logofooter">
<a class="logofooter" href="index.html"> <img src="http://lorempixel.com/output/cats-q-c-128-128-6.jpg"></a>
<div class="brand">
MySiteLogo
</div>
</div>
<ul class="legal">
<li>Privacy Policy</li>
<li>Legal</li>
<li>Disclaimer</li>
<li>Contact</li>
</ul>
<div class="social">
<ul class="socicons">
<li><a class="facebook" href="https://www.facebook.com"> <img src="http://lorempixel.com/output/abstract-q-c-64-64-10.jpg"></a></li>
<li><a class="twitter" href="https://www.twitter.com"><img src="http://lorempixel.com/output/abstract-q-c-64-64-10.jpg"> </a></li>
<li><a class="instagram" href="https://www.instagram.com"><img src="http://lorempixel.com/output/abstract-q-c-64-64-10.jpg"> </a></li>
</ul>
</div>
</div>
</div>
</footer>
</body>
</html>

You forgot to close the <a> tag:
<div class="hamburger2"><a href="login.html">Login</div>

Its not a </div> You are missing the closing </a> tag for your Login link.
<div class="topbar-right">
<div class="hamburger"><img src="http://lorempixel.com/output/food-q-c-48-48-1.jpg"></div>
<div class="hamburger3"><img src="http://lorempixel.com/output/food-q-c-48-48-1.jpg"></div>
<div class="hamburger2"><a href="login.html">Login</div>
</div>