Vertically centring the element on the page [duplicate] - html

This question already has answers here:
How can I vertically align elements in a div?
(28 answers)
Vertically centering a div inside another div [duplicate]
(24 answers)
Closed 6 years ago.
I am unable to vertically align my form, literally tried everything.
margin, vertical-align, height, position - tried applying everything but nothing seems to work.
Here is the html and css that i am using.
html{
position: relative;
background-color: #e1e8f0;
font-size:62.5%;
margin: 0px;
padding: 0px;
font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
height: 500px;
}
.navbar{
border: none;
}
body{
background-color: #e1e8f0;
font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
position: relative;
height: 500px;
width: device-width;
}
.signup{
position: relative;
height: 100%;
width: 50%;
margin: auto auto;
margin-left: 50%;
font-size: 1.6em;
font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
border: 1px solid black;
}
.signup input{
margin:20px;
text-decoration: none;
border: 1px solid #e4e6e8;
font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
border-radius: 5px;
padding: 2px;
}
.message{
width: 50%;
float: left;
overflow: hidden;
}
.message pre{
overflow: hidden;
}
.center{
position: relative;
width: 80%;
height: 70%;
margin: auto auto;
border: 1px solid black;
}
table{
height: 100%;
margin: auto auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="E:\d v/MEAN Lynda - Developing for the MEAN Stack and MongoDB/projects/others/lib/bootstrap.css">
<link rel="stylesheet" type="text/css" href="E:\d v/MEAN Lynda - Developing for the MEAN Stack and MongoDB/projects/others/css/my css.css">
</head>
<body>
<nav class="navbar navbar-default" style="background-color:#222222;color:red;">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="file:///E:/d%20v/MEAN%20Lynda%20-%20Developing%20for%20the%20MEAN%20Stack%20and%20MongoDB/projects/others/lib/login.html" style="color:#fff;">SITE NAME</a>
</div>
<div class="collapse navbar-collapse" id="#myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#" style="color:#fff;" >WHO</a></li>
<li><a href="#" style="color:#fff;" >Sign up</a></li>
<li><a href="#" style="color:#fff;" >Login</a></li>
</ul>
</div>
</div>
</nav>
<div class="signup">
<div class="center">
<form action="#" method="get">
<table border="black">
<tr>
<td><label for="emailId">Email id</label>
<td><input type="email" placeholder="you#example.com" id="emailId"></input><br>
</tr>
<tr>
<td><label for="password">Password</label>
<td><input type="password" placeholder="********" id="password"></input><br>
</tr>
<tr>
<td><label for="name">Name</label>
<td><input type="text" placeholder="Steve Jobs :)" id="name"></input><br>
</tr>
<tr>
<td></td>
<td><button type="submit" class="btn btn-primary">Sign Up</button></td>
</tr>
</table>
</form>
</div>


Try below:
Vertical-align will works with display:table;
html{
position: relative;
background-color: #e1e8f0;
font-size:62.5%;
margin: 0px;
padding: 0px;
font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
height: 500px;
}
.navbar{
border: none;
}
body{
background-color: #e1e8f0;
font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
position: relative;
height: 500px;
width: device-width;
}
.signup{
position: relative;
height: 100%;
width: 100%;
display:table;
margin: auto auto;
font-size: 1.6em;
font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
border: 1px solid black;
}
.signup input{
margin:20px;
text-decoration: none;
border: 1px solid #e4e6e8;
font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
border-radius: 5px;
padding: 2px;
}
.message{
width: 50%;
float: left;
overflow: hidden;
}
.message pre{
overflow: hidden;
}
table{
height: 100%;
margin: auto auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="E:\d v/MEAN Lynda - Developing for the MEAN Stack and MongoDB/projects/others/lib/bootstrap.css">
<link rel="stylesheet" type="text/css" href="E:\d v/MEAN Lynda - Developing for the MEAN Stack and MongoDB/projects/others/css/my css.css">
</head>
<body>
<nav class="navbar navbar-default" style="background-color:#222222;color:red;">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="file:///E:/d%20v/MEAN%20Lynda%20-%20Developing%20for%20the%20MEAN%20Stack%20and%20MongoDB/projects/others/lib/login.html" style="color:#fff;">SITE NAME</a>
</div>
<div class="collapse navbar-collapse" id="#myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#" style="color:#fff;" >WHO</a></li>
<li><a href="#" style="color:#fff;" >Sign up</a></li>
<li><a href="#" style="color:#fff;" >Login</a></li>
</ul>
</div>
</div>
</nav>
<div class="signup">
<form action="#" class="center-block" method="get">
<table border="black">
<tr>
<td><label for="emailId">Email id</label>
<td><input type="email" placeholder="you#example.com" id="emailId"></input><br>
</tr>
<tr>
<td><label for="password">Password</label>
<td><input type="password" placeholder="********" id="password"></input><br>
</tr>
<tr>
<td><label for="name">Name</label>
<td><input type="text" placeholder="Steve Jobs :)" id="name"></input><br>
</tr>
<tr>
<td></td>
<td><button type="submit" class="btn btn-primary">Sign Up</button></td>
</tr>
</table>
</form>
</div>
EDIT:
Yes. use center-block class of bootstrap.


you have to apply style to the form
<style>
form {
margin: 15% 40% 0;
}
</style>


Few Solutions:
You can use flex and it's properties (justify-content and align-items) like vertical-align and add these lines to every parent of a child that you want to align vertically (e.g.: .center)
.center {
display:-webkit-flex;
display:flex;
align-items:center;
justify-content:center;
}
If you don't like the flex solution, you can set the parent's position to "relative" (position:relative;), and insert this code to the child:
.center {
position:relative;
}
.center table {
position:absolute;
top:50%;
left:50%;
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
Hope it was helpful =]

Related

How to center a button while creating it responsive with CSS

I'm using basic HTML, CSS and Javascript to create a simple web app. As I tried text-align: center and other CSS elements to center the button, I'm still having trouble.. I'm also trying to center a text inside the box center, but doesn't work for unknown reason. So far, I have used margin-left and margin-right to adjust the button but willing to know how to center it without going through all these hassle.
.image {
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: 50% 50%;
margin-top: 40px;
margin-left: 50px;
}
.image img {
cursor: pointer;
}
.image img:hover {
border: solid 2px #1e88e5;
border-radius: 2px;
}
.image #mother img:hover {
border: solid 2px #1e88e5;
border-radius: 2px;
}
.image img {
width: 100px;
height: 100px;
text-align: center;
padding: 10px;
margin-left: 30%;
}
.button{
width: 80px;
height: 40px;
text-align: center;
margin: auto;
display: flex;
padding-top: 8px;
padding-bottom: 8px;
background-color: rgb(43, 43, 219);
cursor: pointer;
border-radius: 2px;
}
.button:hover{
background-color: #242424;
}
.button:active{
background-color: #121212;
}
.button > span{
color: #eeeeee;
text-align: center;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<title>Good Cop, Bad Cop</title>
<style>
.view-image img {
margin-left: 90px;
}
</style>
<link rel="stylesheet" href="../CSS/landing.css" />
<link rel="stylesheet" href="../CSS/coach_selection.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/4.6.1/firebase-ui-auth.css" />
</head>
<body>
<nav class="navbar navbar-custom">
<div class="container-fluid">
<a class="navbar-brand" href="">
<img src="../IMAGES/Hamburger_icon.svg" alt="Character" height="35vh" />
</a>
<a href="settings.html">
<ul class="navbar-nav">
<img src="../IMAGES/bootstrap-icons-1.3.0/person-circle.svg" alt="Profile" height="45vh" />
</ul>
</a>
</div>
</nav>
<div class="image">
<div>
<button type="button" id="dog-button" class="btn btn-light">
<img src="../images/dog.png" id="dog" alt="dog">
</button>
</div>
<div>
<button type="button" id="mother-button" class="btn btn-light">
<img src="../images/mother.png" id="mother" alt="mother">
</button>
</div>
<div>
<button type="button" id="soldier-button" class="btn btn-light">
<img src="../images/military.png" id="soldier" alt="soldier">
</button>
</div>
<div>
<button type="button" id="teacher-button" class="btn btn-light">
<img src="../images/teacher.png" id="teacher" alt="teacher">
</button>
</div>
<div class="button" id="button-confirm">
<span>Confirm</span>
</div>
<div class="view-image" style="display:none;">
<img src="" width="150" height="150" />
<div class="button" id="button-other"><span>Other</span></div>
</div>
</div>
<div class="fixed-bottom">
<div class="navbar navbar-custom">
<div class="container-fluid">
<div id="grid">
<div class="bot-nav-img">
<a href="Journal/journal_main.html">
<img src="../IMAGES/bootstrap-icons-1.3.0/book-fill.svg" alt="Journal" height="40vh" />
</a>
</div>
<div class="bot-nav-img">
<a href="landing.html">
<img src="../IMAGES/bootstrap-icons-1.3.0/house-door-fill.svg" alt="Home" height="40vh" />
</a>
</div>
<div class="bot-nav-img">
<a href="goals.html">
<img src="../IMAGES/bootstrap-icons-1.3.0/table.svg" alt="Goals" height="40vh" />
</a>
</div>
</div>
</div>
</div>
</body>
</html>

The quickest and easiest way to create a perfect centre alignment in css is with flexbox.
The general pattern is, give the parent element that needs it's children centered a display: flex;, a justify-content: center;, and a align-items: center;
For your code, get rid of the all the text-align. Then to the .button class, which is already display: flex, add justify-content: center; and align-items: center;
The span element with your text is a child of the button, so it will now become centered. The span element itself will not need any CSS properties to help it center.
.button {
width: 80px;
height: 40px;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
padding-top: 8px;
padding-bottom: 8px;
background-color: rgb(43, 43, 219);
cursor: pointer;
border-radius: 2px;
}

Can you please check the below code? Hope it will work for you. You have to just add your button code outside the .image class and add margin to the button like
.button {
margin: 10px auto 0px;
}
Please refer to this link: https://jsfiddle.net/yudizsolutions/av9fn6tp/

This solution is working for me.
.button {
display : flex;
justify-content: center !important;
align-items: center !important;
text-align: center !important;
margin: 0px auto 0px;
}

One html division being stacked over top of other

I am making a small webpage which is shown below . There is a footer at the end over which "Made with love by Vipul Tyagi" is written. The problem is that it is coming over the previous division(feedback form). No matter how much top property I apply to the footer, it is not moving down even a bit.
Please have a look at my code and help me to find the problem. You will find it at the very end in html just above </body> tag.
Thanks in advance!
$(document).ready(function() {
$("#notif-list li").click(function(e) {
var num = parseInt($("#notif-number").text());
$(this).remove();
$("#notif-number").html("" + num - 1 + "");
});
});
.container1 {
position: relative;
color: white;
}
.centered {
position: absolute;
top: 70%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
}
.fa-input {
font-family: FontAwesome, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.top-left {
position: absolute;
top: 30%;
left: 55%;
transform: translate(-50%, -50%);
}
.heading {
font-family: 'Orbitron', serif;
}
#headmain {
font-size: 50px;
position: relative;
left: -55px;
color: white;
}
#headsecondary {
position: relative;
right: 5%;
color: white;
}
#top-content {
position: relative;
top: 40px;
width: 100%;
background-color: #bbb;
padding: 10px;
}
a {
color: white;
}
.number {
position: absolute;
top: -5px;
right: -2px;
padding: 5px 10px;
border-radius: 30%;
background: green;
color: white;
}
.borderimg {
border-radius: 30%;
}
.carosel {
width: 670px;
}
.service-list {
font-family: 'Lobster', cursive;
font-size: 50px;
}
.labels {
font-size: 15px;
}
.login-box {
width: 320px;
height: 520px;
top: 290px;
background: rgba(0, 0, 0, 0.5);
color: #fff;
box-sizing: border-box;
padding: 70px 30px;
}
.login-box p {
margin: 0;
padding: 0;
font-weight: bold;
}
.login-box input {
width: 100%;
margin-bottom: 20px;
}
.login-box input[type="text"],
input[type="password"] {
border: none;
border-bottom: 1px solid #fff;
background: transparent;
outline: none;
height: 40px;
color: #fff;
font-size: 16px;
}
.login-box input[type="submit"] {
border: none;
outline: none;
height: 40px;
background: #1c8adb;
color: #fff;
font-size: 18px;
border-radius: 20px;
}
.login-box input[type="submit"]:hover {
cursor: pointer;
background: #39dc79;
color: #000;
}
.login-box a {
text-decoration: none;
font-size: 14px;
color: #fff;
}
.login-box a:hover {
color: #39dc79;
}
#media screen and (max-width: 450px) {
.carosel {
width: 300px;
}
.top-left {
position: absolute;
top: 35%;
left: 55%;
transform: translate(-50%, -50%);
}
#headmain {
font-size: 30px;
position: relative;
left: -20px;
color: white;
}
#headsecondary {
font-size: 20px;
position: relative;
right: 5%;
color: white;
}
#service-list {
font-family: 'Lobster', cursive;
font-size: 30px;
}
.login-box {
width: 300px;
height: 500px;
position: relative;
top: 50px;
background: rgba(0, 0, 0, 0.5);
color: #fff;
box-sizing: border-box;
padding: 70px 30px;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">
<style type="text/css">
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div>
<nav class="navbar navbar-inverse navbar-fixed-top" style="opacity: 0.9;top: 10px;">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="sankalpsoft.png" style="height: 30px; width: 30px;bottom : 10px;" /></a>
<a class="navbar-brand" href="#" style="color: white;" onMouseOver="this.style.color='yellow';" onMouseOut="this.style.color='white';">SankalpSoft</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
About Us
</li>
<li>Why We?</li>
<li>Products</li>
<li>Services</li>
<li>Blogs</li>
<li>Contact Us</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" style="color: white;" onMouseOver="this.style.color='yellow';" onMouseOut="this.style.color='white';">Notification<span class="number" id="notif-number">4</span></a>
<ul class="dropdown-menu" id="notif-list">
<li style="padding: 10px 5px;">Notification 1</li>
<li style="padding: 10px 5px;">Notification 2</li>
<li style="padding: 10px 5px;">Notification 3</li>
<li style="padding: 10px 5px;">Notification 4</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div class="container" style="width: 100%;padding-left: 0;padding-right: 0;">
<img src="https://i.postimg.cc/PpNsdrDS/back-img.jpg" alt="Snow" style="width: 100%;height: 350px;filter: grayscale(10%) brightness(60%) contrast(1);box-shadow: 5px 15px 8px #888888;">
<div class="top-left">
<h1 class="heading" id="headmain">SankalpSoft Solutions</h1>
<h3 class="heading" id="headsecondary">We Provide intelligent business support</h3>
</div>
</div>
</div>
<div class="container carosel" style="height: 340px;top: 40px;">
<h2 style="text-align: center;" class="service-list">Services We provide</h2>
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="3000" style="box-shadow: 20px 10px 8px #888888;border-radius: 10%;">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
<li data-target="#myCarousel" data-slide-to="4"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active borderimg">
<img src="https://i.postimg.cc/kVQDWsY0/business.jpg" alt="business" style="width:100%;">
</div>
<div class="item borderimg">
<img src="https://i.postimg.cc/XGnqL5Tp/outsourcing.jpg" alt="outsourcing" style="width:100%;">
</div>
<div class="item borderimg">
<img src="ttps://i.postimg.cc/dDLwYnmJ/webdevelopment.jpg" alt="webdevelopment" style="width:100%;">
</div>
<div class="item borderimg">
<img src="https://i.postimg.cc/K1T6YHRy/applicationdevelopment.png" alt="applicationdevelopment" style="width:100%;">
</div>
<div class="item borderimg">
<img src="https://i.postimg.cc/gn105QC9/customersupport.jpg" alt="customersupport" style="width:100%;">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div class="container login-box" style="position: relative;border-radius: 10%;">
<h1 class="login service-list" style="text-align: center;">Feedback here</h1>
<p class="login service-list labels">Name</p>
<input type="text" name="Name" placeholder="" id="usernm" required>
<p class="login service-list labels">Contact No</p>
<input type="password" name="password" placeholder="" id="contact" required>
<p class="login service-list labels">Message</p>
<input type="text" name="message" placeholder="" id="msg" required>
<input class="service-list" type="submit" name="submit" value="Submit" id="signupbut" class="login"></input>
</div>
<div class="container footer" style="position: relative;background-color: black;width: 100%;margin: 0;padding: 10px;">
<p style="color: white; font-size: 20px;text-align: center;">Made with <span>❤</span> by Vipul Tyagi</p>
</div>
</body>
</html>
EDIT
Although I have found the solution, but I still don't understand what was the issue? I have never seen such behaviour with top prperty!

Wrap your footer around a footer tag and use that tag to adjust the position on your page. The inline css i used is
margin-top: 50%;
I've added a js fiddle for you as well. Take a look at this link:https://jsfiddle.net/zfhassaan/5syxnme1/1/

In the style of class="container footer" , you have used position as relative. So, you can add top: some pixels (for eg: top: 200px) to your style, to keep the footer where ever you want.
For reference: https://www.w3schools.com/css/css_positioning.asp

To sync left navbar with top navbar

I have two navbars in my application which seems to be off-sync. i.e, this:
I would like to have the navbar collapsed across the logo.
Like this:
Tried deploying this logo under navbar-header class too. But faces problems with alignment.
MY CODE:
admin.html:
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>MDM - Admin Suite</title>
<div th:replace="fragments/header :: header-css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-smart-table/2.1.8/smart-table.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans" />
<link rel="stylesheet" type="text/css" href="webjars/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" th:href="#{/css/main.css}" href="../../css/main.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body ng-app="uploadFileApp">
<div th:replace="fragments/header :: header"/>
<div class="sidebar">
<ul>
<li>Home</li>
<li>Service</li>
<li>Portfolio</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<div class="container uploadposition">
<div ng-controller="uploadFileController">
<form class="form-horizontal" id="uploadForm" action="#">
<div class="form-group">
<label class="control-label col-sm-2" for="uploadfile">Upload File:</label>
<div class="col-sm-5">
<input id="upload" class="form-control" type="file" file-model = "uploadedFile" placeholder="Upload File"></input>
</div>
<button type="submit" class="uploadButton" ng-click = "doUploadFile()">Upload</button>
</div>
</form>
<div class="col-sm-offset-2">
<p ng-bind="uploadResult"></p>
</div>
<hr/>
</div>
<div id="pas-table-div" style="display:none;">
<h3>PAS MDM Reject Records</h3>
<div ng-show="loading" >
<h3>Loading...</h3>
</div>
<div class="col-sm-offset-2">
<p ng-bind="submitResult"></p>
</div>
<table st-table="display_records" st-safe-src="employees" ng-init="getData()" ng-show="employees.length"
class="table table-striped" ng-controller="uploadFileController">
<thead>
<tr>
<th>Policy Number</th>
<th width="100px">First Name</th>
<th st-sort="salary">Last Name</th>
<th>Error Description</th>
<th>Validated/Corrected in PAS</th>
<th>Note</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr st-select-row="row" st-select-mode="multiple"
ng-repeat="row in display_records">
<td>{{row.PolicyNumber}}</td>
<td>{{row.FirstName}}</td>
<td>{{row.LastName}}</td>
<td>{{row.ErrorDescription}}</td>
<td>{{row.PASValidated}}</td>
<td>{{row.Note}}</td>
<td><button type="button" class="btn btn-danger" ng-click="deletRecord(row.PolicyNumber)">
<i class="glyphicon glyphicon-trash"> </i>
</button>
</td>
</tr>
<tr>
<td></td>
<td></td>
<td style="border-bottom: 1px solid #ddd;"></td>
<td style="border-bottom: 1px solid #ddd;">
<button type="button" class="submitButton" ng-click="submit(employees)">Submit</button>
</td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5" class="text-center">
<div st-pagination="" st-items-by-page="itemsByPage"></div>
</td>
</tr>
</tfoot>
</table>
</div>
<script src="/js/jsaApp.js"></script>
<script src="/js/uploadFileCtrl.js"></script>
</div>
</body>
</html>
header.html:
<html xmlns:th="http://www.thymeleaf.org">
<head>
<div th:fragment="header-css">
<!-- this is header-css -->
<link rel="stylesheet" type="text/css" href="webjars/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" th:href="#{/css/main.css}" href="../../css/main.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</div>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" th:fragment="header">
<div class="container">
<div class="navbar-header">
<!-- <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".nav-collapse" aria-expanded="false">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button> -->
<a class="navbar-brand" href="#" th:href="#{/}"><img class="logoImg" height="25" width="55" src="http://static1.squarespace.com/static/56bcdc788259b5861e880ebe/t/5a96fae971c10bede98395de/1520548852981/?format=1500w"></img></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li th:classappend="${module == 'tasks' ? 'active' : ''}">
Tasks
</li>
<li th:classappend="${#httpServletRequest.getRequestURI() == '/dashboard' ? 'active':''}"><a th:href="#{/dashboard}"><span>Dashboard</span></a></li>
<li th:classappend="${#httpServletRequest.getRequestURI() == '/orders' ? 'active':''}"><a th:href="#{/orders}"><span>Orders</span></a></li>
<li th:classappend="${#httpServletRequest.getRequestURI() == '/income' ? 'active':''}"><a th:href="#{/income}"><span>Income</span></a></li>
<li role="separator" ></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li th:if="${#authorization.expression('!isAuthenticated()')}">
<a href="/signin" th:href="#{/signin}">
<span class="glyphicon glyphicon-log-in" aria-hidden="true"></span> Sign in
</a>
</li>
<li th:if="${#authorization.expression('isAuthenticated()')}">
<a href="/logout" th:href="#{#}" onclick="$('#form').submit();">
<span class="glyphicon glyphicon-log-out" aria-hidden="true"></span> Sign out
</a>
<form style="visibility: hidden" id="form" method="post" action="#" th:action="#{/logout}"></form>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
main.css:
h1 {
color: #0000FF;
display: inline;
}
h2 {
color: #FF0000;
}
footer {
margin-top: 60px;
}
.uploadposition {
position: absolute;
right: 0px;
top: 100px;
width: 85%;
}
.navbar-inverse {
margin-bottom: 0px !important;
position: relative !important;
}
.logoImg {
background-size: 70.7%;
background-repeat: no-repeat;
background-position: 50%;
}
.submitButton {
background-color: #24b54b;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
border: 1px solid #18ab29;
display: inline-block;
cursor: pointer;
color: #ffffff;
font-family: Arial;
font-size: 17px;
padding: 4px 31px;
text-decoration: none;
}
.submitButton:hover {
background-color: #15ad3b;
}
.submitButton:active {
position: relative;
top: 1px;
}
.uploadButton {
background-color: #16529c;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
border: 1px solid #2958b0;
display: inline-block;
cursor: pointer;
color: #ffffff;
font-family: Arial;
font-size: 17px;
padding: 4px 31px;
text-decoration: none;
}
.uploadButton:hover {
background-color: #0c458a;
}
.uploadButton:active {
position: relative;
top: 1px;
}
.leftNavbar {
width: 10%;
float: left;
}
.navbar .navbar-brand {
padding-top: 5px;
}
.navbar .navbar-brand img {
height: 40px;
width: 70px;
}
body {
padding: 0;
margin: 0;
height: 90vh;
}
.buttons {
position: absolute;
right: 0;
top: 0;
text-decoration: none;
padding: 5px 10px;
margin: 5px;
background: #000;
color: #ccc;
}
.buttons a {
display: block;
}
.button:hover {
color: #ccc;
}
.sidebar {
background: #1a1c1d;
color: #787d80;
width: 125px;
height: 100%;
text-align: left;
transform-origin: left;
transform-style: preserve-3d;
transition: all 0.5s;
overflow: hidden;
}
.sidebar:hideDown {
transform: rotateY(90deg) skewY(10deg);
}
.sidebar:hideUp {
transform: rotateY(90deg) skewY(-10deg);
}
.sidebarHeader {
padding: 20px 10px;
font-weight: 700;
text-align: center;
}
.sidebar ul {
padding: 0;
margin: 0;
list-style-type: none;
display:inline-block;
}
.sidebar li {
padding: 15px 10px;
}
.sidebar a {
text-decoration: none;
color: inherit;
transition: color 0.5s;
}
Can someone help me with this?

I cant move my div, up? yet i can move it left and right?

I am trying to design a simple website, and I have made a div's with a frosted glass effect, now I can position it left and right yet I can't seem to move it up!? the div in question has the name of product panel.
*{
margin: 0;
padding: 0;
}
.background{
background-image: url("http://www.kubipet.com/data/out/55/iwp779807523-electrical-wallpapers.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
#header-frosted{
background: inherit;
position: relative;
width:100%;
height: 200px;
}
.jumbotron-fluid{
background: inherit;
padding-left: 0px;
padding-right:0px;
padding-top:0px;
padding-bottom: 0px;
margin-bottom: 0px;
width: 100%;
color:rgb(0, 0, 0);
}
.display-3{
text-align: center;
margin-top:50px;
}
.navbar.main {
background-color:rgb(0, 0, 0);
color: rgb(255, 255, 255);
margin-top: 0px;
border-style: none;
border-radius: 0%;
}
.nav-pills{
margin-top:2px;
text-align: center;
margin-top:5px;
margin-bottom: 0px;
}
#tab{
color: white;
}
#tab:hover {
background-color: rgb(63, 60, 60);
}
.frosted-glass {
width:10%;
height:auto;
background: inherit;
position: relative;
z-index: 1;
overflow: hidden;
margin: 30px,30px,30px,30px;
padding: 2rem;
box-sizing: border-box;
}
.frosted-glass::before {
width:auto;
height:auto;
content: "";
position: absolute;
z-index: -1;
top: 0; right: 0; bottom: 0; left: 0;
background: inherit;
box-shadow: inset 0 0 3000px rgba(255,255,255,.5);
filter: blur(5px);
}
#product-panel{
width:500px;
height: 400px;
text-align:left;
position: absolute;
margin-top:20px;
}
#contact-details{
width:200px;
height: 330px;
text-align:left;
margin-left: auto;
margin-bottom: 100px;
position: relative;
}
#details{
text-align: center;
}
enter code here
`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="fonts\css\font-awesome.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="css\KAD-css.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>Website</title>
</head>
<body class="background">
<div class="jumbotron jumbotron-fluid frosted-glass" id="header-frosted" >
<div class="container img-responsive">
<h1 class="display-3">Random Title</h1>
</div>
</div>
<nav class="navbar navbar-expand-lg navbar-dark navbar-default main" >
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"id="tab">Random Title</a>
</div>
<div class="collapse navbar-collapse text-centre" id="myNavbar">
<ul class="nav nav-pills center-pills">
<li class="nav-item ">
<a class="nav-link" href="#" id="tab"> Random1
</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="#"id="tab"> Random2
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"id="tab"> Random3
</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
</ul>
</div>
</div>
</nav>'
<div class="frosted-glass" id="contact-details">
<h3 id="details">Contact Details</h3>
<p><strong>Name:</strong>John Doe</p>
<p><strong>Phone Number:</strong> 000000000</p>
<h3>Address:</h3>
<strong><p>Random Title.</p>
<p>PO Box 000</p>
<p>Random Town, Random Country</p>
<p>000</p>
</strong>
</div>
<!--Product Panel-->
<div class="frosted-glass" id="product-panel">
This is the div in question.
</div>
</body>
</html>
Bearing in mind i just started out with web design some help and input is greatly appreciated.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="fonts\css\font-awesome.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="css\KAD-css.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>Website</title>
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
<style>
*{
margin: 0;
padding: 0;
}
.background{
background-image: url("http://www.kubipet.com/data/out/55/iwp779807523-electrical-wallpapers.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
#header-frosted{
background: inherit;
position: relative;
width:100%;
height: 200px;
}
.jumbotron-fluid{
background: inherit;
padding-left: 0px;
padding-right:0px;
padding-top:0px;
padding-bottom: 0px;
margin-bottom: 0px;
width: 100%;
color:rgb(0, 0, 0);
}
.display-3{
text-align: center;
margin-top:50px;
}
.navbar.main {
background-color:rgb(0, 0, 0);
color: rgb(255, 255, 255);
margin-top: 0px;
border-style: none;
border-radius: 0%;
}
.nav-pills{
margin-top:2px;
text-align: center;
margin-top:5px;
margin-bottom: 0px;
}
#tab{
color: white;
}
#tab:hover {
background-color: rgb(63, 60, 60);
}
.frosted-glass {
width:10%;
height:auto;
background: inherit;
position: relative;
z-index: 1;
overflow: hidden;
margin: 30px,30px,30px,30px;
padding: 2rem;
box-sizing: border-box;
}
.frosted-glass::before {
width:auto;
height:auto;
content: "";
position: absolute;
z-index: -1;
top: 0; right: 0; bottom: 0; left: 0;
background: inherit;
box-shadow: inset 0 0 3000px rgba(255,255,255,.5);
filter: blur(5px);
}
#product-panel{
width:500px;
height: 400px;
text-align:left;
position: absolute;
margin-top:20px;
}
#contact-details{
width:200px;
height: 330px;
text-align:left;
margin-left: auto;
margin-bottom: 100px;
position: relative;
}
#details{
text-align: center;
}
/*
Start of Code - Laxmikant Killekar
*/
body{
overflow-x: hidden;
}
/*
End of Code - Laxmikant Killekar
*/
</style>
</head>
<body class="background">
<div class="jumbotron jumbotron-fluid frosted-glass" id="header-frosted" >
<div class="container img-responsive">
<h1 class="display-3">Random Title</h1>
</div>
</div>
<nav class="navbar navbar-expand-lg navbar-dark navbar-default main" >
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"id="tab">Random Title</a>
</div>
<div class="collapse navbar-collapse text-centre" id="myNavbar">
<ul class="nav nav-pills center-pills">
<li class="nav-item ">
<a class="nav-link" href="#" id="tab"> Random1</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="#"id="tab"> Random2 </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"id="tab"> Random3</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
</ul>
</div>
</div>
</nav>
<!-- Start of Code - Laxmikant Killekar -->
<div class="fluid-container">
<div class="row">
<div class="col-md-6">
<!--Product Panel-->
<div class="frosted-glass" id="product-panel">
This is the div in question.
</div>
</div>
<div class="col-md-4 pull-right">
<div class="frosted-glass" id="contact-details">
<h3 id="details">Contact Details</h3>
<p><strong>Name:</strong>John Doe</p>
<p><strong>Phone Number:</strong> 000000000</p>
<h3>Address:</h3>
<strong><p>Random Title.</p>
<p>PO Box 000</p>
<p>Random Town, Random Country</p>
<p>000</p>
</strong>
</div>
</div>
</div>
</div>
<!--End of Code - Laxmikant Killekar-->
</body>
</html>

here
is the codepen, tell me if it solved your problem
put your
<div class="frosted-glass" id="product-panel">
before<div class="frosted-glass" id="contact-details">

Add top:(value)px to this
#product-panel{
width:500px;
height: 400px;
text-align:left;
position: absolute;
margin-top:20px;
top:320px;
}
and you can change position to it
*{
margin: 0;
padding: 0;
}
.background{
background-image: url("http://www.kubipet.com/data/out/55/iwp779807523-electrical-wallpapers.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
#header-frosted{
background: inherit;
position: relative;
width:100%;
height: 200px;
}
.jumbotron-fluid{
background: inherit;
padding-left: 0px;
padding-right:0px;
padding-top:0px;
padding-bottom: 0px;
margin-bottom: 0px;
width: 100%;
color:rgb(0, 0, 0);
}
.display-3{
text-align: center;
margin-top:50px;
}
.navbar.main {
background-color:rgb(0, 0, 0);
color: rgb(255, 255, 255);
margin-top: 0px;
border-style: none;
border-radius: 0%;
}
.nav-pills{
margin-top:2px;
text-align: center;
margin-top:5px;
margin-bottom: 0px;
}
#tab{
color: white;
}
#tab:hover {
background-color: rgb(63, 60, 60);
}
.frosted-glass {
width:10%;
height:auto;
background: inherit;
position: relative;
z-index: 1;
overflow: hidden;
margin: 30px,30px,30px,30px;
padding: 2rem;
box-sizing: border-box;
}
.frosted-glass::before {
width:auto;
height:auto;
content: "";
position: absolute;
z-index: -1;
top: 0; right: 0; bottom: 0; left: 0;
background: inherit;
box-shadow: inset 0 0 3000px rgba(255,255,255,.5);
filter: blur(5px);
}
#product-panel{
width:500px;
height: 400px;
text-align:left;
position: absolute;
margin-top:20px;
top:320px;
}
#contact-details{
width:200px;
height: 330px;
text-align:left;
margin-left: auto;
margin-bottom: 100px;
position: relative;
}
#details{
text-align: center;
}
enter code here
`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="fonts\css\font-awesome.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="css\KAD-css.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>Website</title>
</head>
<body class="background">
<div class="jumbotron jumbotron-fluid frosted-glass" id="header-frosted" >
<div class="container img-responsive">
<h1 class="display-3">Random Title</h1>
</div>
</div>
<nav class="navbar navbar-expand-lg navbar-dark navbar-default main" >
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"id="tab">Random Title</a>
</div>
<div class="collapse navbar-collapse text-centre" id="myNavbar">
<ul class="nav nav-pills center-pills">
<li class="nav-item ">
<a class="nav-link" href="#" id="tab"> Random1
</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="#"id="tab"> Random2
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"id="tab"> Random3
</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
</ul>
</div>
</div>
</nav>'
<div class="frosted-glass" id="contact-details">
<h3 id="details">Contact Details</h3>
<p><strong>Name:</strong>John Doe</p>
<p><strong>Phone Number:</strong> 000000000</p>
<h3>Address:</h3>
<strong><p>Random Title.</p>
<p>PO Box 000</p>
<p>Random Town, Random Country</p>
<p>000</p>
</strong>
</div>
<!--Product Panel-->
<div class="frosted-glass" id="product-panel">
This is the div in question.
</div>
</body>
</html>

When you use more than one items in a line, it should satisfy the width proportion
So, give width percentage '%' instead of pixel 'px',
here you can use float:left to include more than one item in a line.
Try to use width in percentage, it is the way most developers use
*{
margin: 0;
padding: 0;
}
.background{
background-image: url("http://www.kubipet.com/data/out/55/iwp779807523-electrical-wallpapers.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
#header-frosted{
background: inherit;
position: relative;
width:100%;
height: 200px;
}
.jumbotron-fluid{
background: inherit;
padding-left: 0px;
padding-right:0px;
padding-top:0px;
padding-bottom: 0px;
margin-bottom: 0px;
width: 100%;
color:rgb(0, 0, 0);
}
.display-3{
text-align: center;
margin-top:50px;
}
.navbar.main {
background-color:rgb(0, 0, 0);
color: rgb(255, 255, 255);
margin-top: 0px;
border-style: none;
border-radius: 0%;
}
.nav-pills{
margin-top:2px;
text-align: center;
margin-top:5px;
margin-bottom: 0px;
}
#tab{
color: white;
}
#tab:hover {
background-color: rgb(63, 60, 60);
}
.frosted-glass {
width:10%;
height:auto;
background: inherit;
position: relative;
z-index: 1;
overflow: hidden;
margin: 30px,30px,30px,30px;
padding: 2rem;
box-sizing: border-box;
}
.frosted-glass::before {
width:auto;
height:auto;
content: "";
position: absolute;
z-index: -1;
top: 0; right: 0; bottom: 0; left: 0;
background: inherit;
box-shadow: inset 0 0 3000px rgba(255,255,255,.5);
filter: blur(5px);
}
#product-panel{
width:70%;
height: 400px;
text-align:left;
float:left;
}
#contact-details{
width:30%;
height: 330px;
text-align:left;
margin-left: auto;
margin-bottom: 100px;
float:left;
}
#details{
text-align: center;
}
enter code here
`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="fonts\css\font-awesome.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="css\KAD-css.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>Website</title>
</head>
<body class="background">
<div class="jumbotron jumbotron-fluid frosted-glass" id="header-frosted" >
<div class="container img-responsive">
<h1 class="display-3">Random Title</h1>
</div>
</div>
<nav class="navbar navbar-expand-lg navbar-dark navbar-default main" >
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"id="tab">Random Title</a>
</div>
<div class="collapse navbar-collapse text-centre" id="myNavbar">
<ul class="nav nav-pills center-pills">
<li class="nav-item ">
<a class="nav-link" href="#" id="tab"> Random1
</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="#"id="tab"> Random2
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"id="tab"> Random3
</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
</ul>
</div>
</div>
</nav>'
<!--Product Panel-->
<div class="frosted-glass" id="product-panel">
This is the div in question.
</div>
<div class="frosted-glass" id="contact-details">
<h3 id="details">Contact Details</h3>
<p><strong>Name:</strong>John Doe</p>
<p><strong>Phone Number:</strong> 000000000</p>
<h3>Address:</h3>
<strong><p>Random Title.</p>
<p>PO Box 000</p>
<p>Random Town, Random Country</p>
<p>000</p>
</strong>
</div>
</body>
</html>

Need help debugging Bootstrap responsiveness. Cannot get content to scale properly

This is only my second time using Bootstrap in a project. I'm not sure what is causing my page to not be properly responsive. When resizing the view port content shifts out of the containers. I believe it is being caused by improper usage of the Bootstrap col-* and rows classes. Below is the HTML and CSS code.
EDIT: I have recently gone trough and refactored some of the code and found that I did not put rows inside of columns properly.
.wrapper {
position: relative;
padding: 0 15px;
}
.responsive-image {
width: 100%;
height: auto;
}
#statement {
position: absolute;
text-align: center;
top: 280px;
left: 300px;
font-size: 50px;
font-weight: bold;
color: #ffffff;
}
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
top: -215px;
position: relative;
max-width: 96.7vw;
height: 200px;
left: 30px;
top: -340px;
padding-bottom: 50px;
}
a {
color: #ffffff;
}
.search-text {
padding-left: 10px;
float: right;
}
.glyphicon-search {
padding-top: 10px;
padding-left: 30px;
color: black;
}
.search-bar-container {
padding-top: 10px;
background-color: red;
top: -390px;
max-width: 96.7vw;
height: 70px;
left: 31px;
}
.row-eq-height>[class*='col-'] {
position: relative;
display: flex;
flex-direction: column;
text-align: center;
padding-top: 50px;
font-size: 25px;
font-style: italic;
font-weight: bold;
}
.translucent>div {
background-color: rgba(0, 0, 0, 0.5);
border: solid 1px #ffffff;
}
.nav-item>a {
color: #000000;
font-weight: bold;
}
.nav-wrapper {
position: absolute;
right: 0;
left: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mock Up</title>
<!-- Bootstrap Link -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Custom CSS -->
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="nav-wrapper">
<nav class="navbar navbar-static-top">
<!--Navbar-->
<div class="row">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBar">
<!-- Collapsing Hamburger Buttons for mobile -->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!--Menu Items-->
<div class="collapse navbar-collapse navbar-right" id="mainNavBar">
<ul class="nav navbar-nav">
<li class="nav-item">
HOME
</li>
<li class="nav-item">
SHOWROOM
</li>
<li class="nav-item">
SERVICES
</li>
<li class="nav-item">
INFO
</li>
<li class="nav-item">
PHOTO GALLERY
</li>
<li class="nav-item">
CONTACT
</li>
</ul>
</div>
</div>
</div>
</nav>
</div>
<div class="wrapper">
<img class="responsive-image" src="https://lh3.google.com/u/0/d/0B7B-ke12S7B2YmRfVmlUaDdZU1E=w1366-h653-iv1" alt="road in the sunset banner">
</div>
<div class="row row-eq-height translucent">
<div class="col-lg-3 col-xs-12 box-color">NEW <br>INVENTORY</div>
<div class="col-lg-3 col-xs-12 box-color">PRE OWNED <br>INVENTORY</div>
<div class="col-lg-3 col-xs-12 box-color">CUSTOMER <br>FABRICATION</div>
<div class="col-lg-3 col-xs-12 box-color">SERVICE <br>DEPARTMENT</div>
</div>
<div class="row">
<div class="col-xs-12 search-bar-container">
<form class="form-inline">
<div class="form-group">
<label><span class="search-text glyphicon glyphicon-search" aria-hidden="true">QUICK SEARCH</span></label>
<input type="text" class="form-control" id="search-manufacturers" placeholder="(All Manufacturers)">
</div>
</form>
</div>
</div>
<script src="https://use.fontawesome.com/bd8b80bd9d.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>

Refer this Fiddle if you are looking for something like this. In this Fiddle I have updated your code with some structure and CSS changes.