Same css styling is resulting in two different layouts - php

Question

My partner and I are trying to make a shopping cart site for a school project. We are having trouble with our navbar.
We use the exact same files for styling this specific navbar. (its called universal.css and inherited by each page)
Also, the navbar HTML code is in a PHP file included via script (same script for both).
However, index.php of the products is not vertically aligned with the pull-right statements, though the index.php of the whole website is.
What's the problem?
(The JS file of products and index do not do anything different to the navbar They are essentially the same).
Here is my code, we host at main page https://webdes-nikhilb99.c9users.io/ and products page https://webdes-nikhilb99.c9users.io/products
Mainnav.css
#media (max-width: 1325px) {
.navbar-header {
float: none;
}
.navbar-collapse.collapse.in { display: block!important; }
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin: 7.5px -15px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.navbar-text {
float: none;
margin: 15px 0;
}
/* since 3.1.0 */
.navbar-collapse.collapse.in {
display: block!important;
}
.collapsing {
overflow: hidden!important;
}
}
.glyphicon-search{
color:white;
}
#search-btn{
background-color: #337ab7;
}
Universal.css
#import url('productModal.css');
#import url('bottomNav.css');
#import url('mainNav.css');
row-title{
color:#337ab7;
font-weight:bold;
font-size:30pt;
margin-top:60px;
width:100%;
padding-bottom:50px;
}
#content-wrapper{
background-color: black;
width:100%;
opacity: 0.9;
}
#content-wrapper .content p{
color:white;
}
.content{
color:#337ab7;
font-weight:bold;
font-size:20pt;
text-align:center;
}
.content p{
font-size:10pt;
}
#mainNav{
background-color: black;
font-family: Montserrat;
font-weight: 700;
font-size:10pt;
border-bottom: 4px solid #337ab7;
background: rgba(0,0,0,0.9);
}
#img1{
position:absolute;
top:0;
left:0;
width:100%;
}
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset !important;
}
.navbar-custom .navbar-toggle .icon-container .icon-bar {
background-color: #000;
}
.navbar-custom .navbar-toggle .icon-container{
background-color:#000;
}
.navbar-nav .dropdown a{
color:#337ab7;
font-size:18pt;
text-decoration:none;
}
.blacktext{
color:#337ab7;
font-size:18pt;
}
/*Drop down menu*/
.dropdown:hover .dropdown-menu {
display: block;
}
.dropdown-menu{
/**Change up the stuff in the dropdown here*/
}
.dropdown{
line-height:95px;
}
.navbar-nav .dropdown .dropdown-toggle{
font-size:30pt;
}
.navbar-nav > li >a{
line-height:65px ;
}
.navitem{
font-size:30pt;
}
.navbar-nav > li >a:focus{
background-color:transparent;
}
#loginWindow .modal-dialog .modal-footer{
text-align: left !important;
}
body{
padding-top: 65px;
}
.icon-bar{
background-color: #fff;
line-height:65px;
font-size:30pt;
}
.vertical-center {
min-height: 100%; /* Fallback for browsers do NOT support vh unit */
min-height: 100vh; /* These two lines are counted as one */
display: flex;
align-items: center;
}
body{
background-color: black;
}
/*.btn-success{
background-color: #337ab7;
}
.btn-success:hover{
background-color:blue;
}*/
/*Login and Registration buttons*/
.btn-primary{
background-color:#337ab7;
}
.btn-primary:focus{
background-color:#337ab7;
}
.btn-primary:hover{
background-color:white;
color:#337ab7;
}
.navbar-nav > li >a:hover{
background-color:transparent;
color:white;
}
#logo{
margin-left:10px;
margin-top:10px;
margin-right:20px;
margin-bottom:3px;
}
#nikhil{
color:white;
}
#yadu{
color:white;
}
#content-wrapper{
position:absolute;
left:10%;
width:80% !important;
margin-top: 50px;
border-radius:25px;
opacity:0.95;
border: 3px double white;
}
.active a{
color:white !important;
}
.active a:hover{
color:white !important;
}
.active a:focus{
color:white !important;
}
body{
background-image:url("http://www.legionreport.com/wp-content/uploads/2014/04/blakegriffindunk.jpg");
}
#mtt{
color:#337ab7;
}
#bballfam{
height:200px;
width:80%;
}
Products page:
<html>
<head>
<title>Products</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="/favicon.ico">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" type="text/css">
<link href='//fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="/css/products.css">
</head>
<body>
<div class="container">
<?php
include('../snips/loginModal.php');
include('../snips/registrationModal.php');
include('../snips/menuMain.php');
?>
<div id='content-wrapper'>
<div class="row">
<div class="col-md-4 info basketball-info">
<h2 class="title text-center">Basketball</h2>
<div class="apparel">
</div>
<div class="balls">
</div>
<div class="footwear">
</div>
<div class="gear">
</div>
</div>
<div class="col-md-4 info football-info">
<h2 class="title text-center">Football</h2>
<div class="apparel">
</div>
<div class="balls">
</div>
<div class="footwear">
</div>
<div class="gear">
</div>
</div>
<div class="col-md-4 info soccer-info">
<h2 class="title text-center">Soccer</h2>
<div class="apparel">
</div>
<div class="balls">
</div>
<div class="footwear">
</div>
<div class="gear">
</div>
</div>
</div>
<script type="text/javascript">
$("#srch-term").css('width', $(window).width()).css('right','-9%');
$(".bottom-nav").css('display','none');
</script>
<!--<div class="row">
<div id='basketball-info' class="info col-md-12">
<h2 class="title text-center">Basketball</h2>
<div class="apparel">
</div>
<div class="balls">
</div>
<div class="footwear">
</div>
<div class="gear">
</div>
<!--Alphabetical order
</div>
</div>
<div class="row">
<div id='football-info' class="info col-md-12">
<h2 class="title text-center">Football</h2>
<div class="apparel">
</div>
<div class="balls">
</div>
<div class="footwear">
</div>
<div class="gear">
</div>
<!--Alphabetical order
</div>
</div>
<div class="row">
<div id='soccer-info' class="info col-md-12">
<h2 class="title text-center">Soccer</h2>
<div class="apparel">
</div>
<div class="balls">
</div>
<div class="footwear">
</div>
<div class="gear">
</div>
<!--Alphabetical order
</div> -->
</div>
</div>
</div>
<?php
include('/home/ubuntu/workspace/snips/bottomNav.php');
?>
<?php
include('/home/ubuntu/workspace/snips/productPageModal.php');
?>
<script src="/js/products.js"></script>
<script type="text/javascript">
// $(".title").click(function(){
// $("#productsPage .modal-title").text($(this).text());
// });
// $(".bottom-nav").css('left','0');
</script>
</body>
</html>
Main Page:
<!DOCTYPE HTML>
<html>
<head>
<title>Baller Sporting Goods</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" type="text/css" href="/css/index.css">
<link href='//fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="/js/index.js" type="text/javascript"></script>
<body>
<?php
/*Login page is a Bootstrap modal included on the main page. See snips/loginModal.php*/
include('snips/loginModal.php');
/*Registration page is a Bootstrap modal included on the main page. See snips/registrationModal.php*/
include('snips/registrationModal.php');
include('snips/menuMain.php')
?>
<div class="container" id="wrapper">
<div id='content-wrapper'>
<div class="row">
<h2 class="text-center row-title" id='mtt'>
<img class='center-block' id = "welcome" src="img/welcome.png" width="80%"/>
<br>
<i>Where Ball Really Is Life</i>
<br>
<br>
</h2>
<div class="col-md-9 content center-block">
Online Services
<p>
At Baller Sporting Goods, we offer a variety of services available to many devices.
On our site, you may use our always available quick-search that will locate the exact item
you need in a matter of seconds.
Or, if you like to shop around yourself, you can look over our exhorbitant list of products
on our site by clicking on the <a href='/products/'>Sports</a> icon on the top. We implement
an organized structure of products that sort by sport, company, and type of equipment. Check
it out!
</p>
</div>
<div class="col-md-9 content center-block">
Our Products
<p>
We started in 1991 in the garage of two partners: Nikhil Bharani & Yadunandan Pillai.
Both were high school students tired of studying; so they decided to take the easy way
out and start a business.
They accepted a small loan of one million dollars, which they used on buying the necessities
of a business: products. Eventually, the garage was full of brand new products from medium-scale
companies like ESPN and Dicks Sporting Goods, which they sold for 50 cents on EBay.
</p>
<p>
However, one million dollars is quite a small amount, so they ran out quicker than they planned.
The two collaborators then decided to escape loan sharks by moving to an island outisde US jurisdiction
and starting a shady business.
This business, today, is the most legit one in the world: Baller Sporting Goods.
We sell numerous performance-enhancing drugs and other nutritional supplements along with
imported goods from richer companies like Hong Kong.
We also sell purposefully torn up clothing made by hand.
Our best products are the cubic soccer balls.
</p>
</div>
<br>
</div>
<?php
include('snips/bottomNav.php');
?>
</div>
<!--<script src="/js/libs/slideshow.js"></script>-->
<script src="/js/index.js"></script>
</body>
</html>
Index.css
#import url('universal.css');
#searchbar{
margin-right:auto;
margin-left:auto;
width:50%;
}
#media screen and (min-width: 1200px){
.content{
left:12.5%;
}
}
.content{
padding-bottom: 50px;
}
#media screen and (max-width:800px){
#content-wrapper{
padding-right:40px;
padding-left:40px;
}
}
#wrapper{
width:100%;
height:100%;
}
#searchbar #searchForm{
color:blue;
margin-left: auto;
margin-right:auto;
}
#title h2{
font-family: Montserrat;
font-weight: bold;
color:black;
text-align:center;
margin-top:65px;
}
#searchbar #searchForm input[name='search']{
background-color:#e9e9e9;
}
#slideshoww{
margin-top:70px;
margin-right:auto;
margin-left: auto;
position:absolute;
width:100%;
opacity:0.3;
}
#searchbar #searchForm #bar_img{
font-size:25pt;
}
#welcome{
width:95%;
}
#bar_img{
color:black;
}
#content-wrapper .row-title i{
font-size:20pt;
color:lightGrey;
}
#content-wrapper{
position:absolute;
left:10%;
width:80% !important;
margin-top: 100px;
border-radius:25px;
opacity:0.90;
border-right: 3px double white;
border-left: 3px double white;
font-family:Montserrat;
}
.col-md-6{
left:25%;
}
Products.css
#import url('universal.css');
#media screen and (min-width:990px){
.col-md-4{
border-right: 4px solid #337ab7;
}
.col-md-4:last-child{
border:none;
}
}
.col-md-4{
text-align:center;
font-family: Montserrat;
}
.col-md-4 .main-link{
font-size:20pt;
color:white;
font-weight:bold;
}
.info .title{
font-size:20pt;
color:#337ab7;
font-weight:bold;
}
#content-wrapper{
background:rgba(0,0,0,0.9);
}