I'm trying to align text links underneath each other but for some reason some of the links doesn't go underneath each other.
This is how it looks like: http://i.stack.imgur.com/1gonA.jpg.
This is what I want to achieve: http://i.stack.imgur.com/oH0Ap.jpg
Here is the code so far:
HTML:
<footer class="footer">
<div class="bottom-column">
<div class="bottom-header">STREETZ</div>
<a class"bottom-link" href="#Home">Home</a>
<a class"bottom-link" href="#About">About us</a>
<a class"bottom-link" href="#Sitemap">Sitemap</a>
<a class"bottom-link" href="#Blog">Blog</a>
<a class"bottom-link" href="#Blog">Privacy Policy</a>
<a class"bottom-link" href="#Blog">Terms of Service</a>
</div>
<div class="bottom-column">
<div class="bottom-header">SUPPORT</div>
<a class"bottom-link" href="#Home">FAQ</a>
<a class"bottom-link" href="#About">Contact us</a>
<a class"bottom-link" href="#Sitemap">Shipping</a>
<a class"bottom-link" href="#Blog">Returns</a>
</div>
</footer>
CSS:
.footer {
position: relative;
width: 1024px;
height: 200px;
background: #f5f5f5;
margin: 0 auto;
top: 1255px;
border-top: 1px solid #d8d8d8;
}
.bottom-header {
font-size: 14px;
line-height: 20px;
position: relative;
color: #333;
text-transform: uppercase;
}
.bottom-column {
float:left;
display: inline;
font-size: 15px;
width: 105px;
height: 160px;
padding: 20px;
}
.bottom-column a {
text-decoration: none;
color: #6a6a6a;
float: left;
left: 50px;
padding-top: 10px;
font-size: 13px;
}
Try the following:
.bottom-column a {
display: block; //To force the text links to stack on top of one another
}
And remove the float:left from .bottom-column a {...}.
The float is causing the links to be lined up against each other.
Here's a Fiddle.
Try adding 'clear: both;' to .bottom-column a
.bottom-column a {
text-decoration: none;
color: #6a6a6a;
float: left;
left: 50px;
padding-top: 10px;
font-size: 13px;
clear: both;
}
Related
I'm trying to replicate sites for practice and tried to import materialize. That totally messed up the styling of my page. I tried to download the css with only the components i need but still no change.
This is the page without bootstrap:
This is the page after importing bootstrap.css
Here is style.css
#import url("https://fonts.googleapis.com/css?family=Montserrat&display=swap");
html, body {
padding: 0;
margin: 0;
font-family: 'Montserrat';
}
html a, body a {
text-decoration: none;
outline: none;
}
#header {
z-index: 100;
width: 100%;
height: 79px;
background: white;
position: fixed;
border-bottom: 1.5px solid #eee;
}
#header #small-header {
height: auto;
padding: 6px;
height: 12px;
font-size: 10px;
font-weight: 500;
background: #EEEEEE;
}
#header #small-header #left {
float: left;
}
#header #small-header #right {
float: right;
}
#header #small-header .header-link {
color: #57606f;
margin: 0 6px;
}
#header #small-header .header-link:hover {
color: black;
}
#header #main-header {
height: 55px;
line-height: 55px;
padding: 0;
}
#header #main-header img {
height: 20px;
padding: 0 8px;
margin-right: 30px;
margin-left: 20px;
vertical-align: middle;
}
#header #main-header #links {
height: 55px;
display: inline-block;
}
#header #main-header #links ul {
margin: 0;
list-style-type: none;
}
#header #main-header #links ul li {
display: inline-block;
height: 52px;
cursor: pointer;
border: none;
-webkit-transition: opcatiy 0.3s;
transition: opcatiy 0.3s;
}
#header #main-header #links ul li .main-header-link {
text-transform: uppercase;
font-weight: 600;
color: #2f3640;
margin: 6px;
font-size: 12.5px;
letter-spacing: 2px;
}
#header #main-header #links ul li:hover {
border-bottom: 4px solid #fbc531;
}
#header #main-header .main-header-link {
font-weight: 600;
color: #2f3640;
font-size: 15px;
}
#header #main-header #right {
margin-right: 20px;
float: right;
}
#header #main-header #right #search {
display: inline-block;
margin-left: 100px;
}
#header #main-header #right #search input {
text-indent: 23px;
width: 300px;
display: inline-block;
position: relative;
font-family: 'Montserrat';
font-size: 12px;
height: 30px;
background: #EAEAEA;
outline: none;
border: none;
padding: 4px;
border-radius: 5px;
}
#header #main-header #right #search #inp:before {
font-family: 'FontAwesome';
content: '\f002';
position: absolute;
z-index: 11;
margin: 0 8px;
color: #95a5a6;
}
#header #main-header #right #search input:focus {
background: white;
border: 1px solid #2f3640;
}
#header #main-header #right #sep {
background: black;
opacity: 0.4;
width: 1px;
vertical-align: middle;
margin: 0 15px;
top: 50%;
height: 20px;
display: inline-block;
position: relative;
z-index: 11;
}
.landing {
position: relative;
top: 78px;
}
.landing img {
margin: 0;
width: 100%;
}
/*# sourceMappingURL=style.css.map */
and the html:
<!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">
<script defer type="text/javascript" src="https://use.fontawesome.com/releases/v5.8.2/js/all.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link rel="stylesheet" href="css/style.css">
<title>Bewakoof</title>
</head>
<body>
<div id="front-page">
<!-- Header -->
<div id="header">
<div id="small-header">
<div id="left">
<a class="header-link" href="#">Offers</a>
<a class="header-link" href="#">Fanbook</a>
<a class="header-link" href="#">
<span><i class="fas fa-mobile-alt" style="width: auto;"></i></span>
Download App
</a>
<a class="header-link" href="#">TriBe Membership</a>
</div>
<div id="right">
<a class="header-link" href="#">Contact Us</a>
<a class="header-link" href="#">Track Order</a>
<a class="header-link" href="#">Pay online & get free shipping.</a>
</div>
</div>
<div id="main-header">
<img src="images/bewakoof-logo-og.png">
<div id="links">
<ul>
<li><a class="main-header-link" href="#">Men</a></li>
<li><a class="main-header-link" href="#">Women</a></li>
<li><a class="main-header-link" href="#">Mobile covers</a></li>
<li><a class="main-header-link" href="#">clearance zone</a></li>
</ul>
</div>
<div id="right">
<form id="search">
<div id="inp">
<input type="text" placeholder="Search by product or category">
</div>
</form>
<div id="sep"></div>
<a class="main-header-link" href="#">Login</a>
<i class="far fa-heart fa-lg" style="margin: 0 10px; color: black"></i>
<i class="fas fa-shopping-bag fa-lg" style="color: black;"></i>
</div>
</div>
</div>
<!-- Header end -->
<div class="landing">
<img src="images/hulk.gif">
<button class="btn-lg btn-warning">daw</button>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>
This might occur because bootstrap and materialize uses the same class name.
You should pick one to use, and use your own CSS to personalize it yourself.
The materialize has its own navbar center style.
Good luck
Alright, I figured it out. It seems that the following code was the culprit:
#left{
float: left;
}
#right{
float: right;
}
I changed it to:
.row {
display: flex;
justify-content: space-between;
margin: 0;
width: 100%;
}
.row::after{
content: none;
}
and
<div class="row">
<div id="left">
<a class="header-link" href="#">Offers</a>
<a class="header-link" href="#">Fanbook</a>
<a class="header-link" href="#">
<span><i class="fas fa-mobile-alt" style="width: auto;"></i></span>
Download App
</a>
<a class="header-link" href="#">TriBe Membership</a>
</div>
<div id="right">
<a class="header-link" href="#">Contact Us</a>
<a class="header-link" href="#">Track Order</a>
<a class="header-link" href="#">Pay online & get free shipping.</a>
</div>
</div>
and now its working perfectly.
I'm currently working on a site for a small business when i ran into a problem, when trying to apply a border radius to a div it only applies it to the left side, i have searched google and stack overflow for a similar answer but haven't found anything.
body
{
background-color: #e0e0e0;
}
#banner
{
background-color: #404040;
height: 10em;
border-radius: 1em;
box-shadow: -0.1em 0.3em;
}
#bannerimg
{
height: 65%;
margin-left: 1em;
margin-top: 1em;
}
#container
{
margin-left: 20em;
margin-top: -7em;
overflow: hidden;
border-radius: 1em;
}
.list
{
float: left;
padding: 1.5em;
font-size: 2em;
color: #067411;
background-color: #e0e0e0;
}
<header id="banner">
<div id="container">
<a class="list">Services</a>
<a class="list">Remote Support</a>
<a class="list">Home</a>
<a class="list">About Us</a>
<a class="list">Contact Us</a>
<div>
</header>
If anyone has an answer it would be greatly appreciated
The background color is overlapping the header div.
body
{
background-color: #e0e0e0;
}
#banner
{
background-color: #404040;
height: 10em;
border-radius: 1em;
box-shadow: -0.1em 0.3em;
}
#bannerimg
{
height: 65%;
margin-left: 1em;
margin-top: 1em;
}
#container
{
margin-left: 20em;
margin-top: -7em;
overflow: hidden;
border-radius: 1em;
}
.list
{
float: left;
padding: 1.5em;
font-size: 2em;
color: #067411;
/*background-color: #e0e0e0;*/
}
<header id="banner">
<div id="container">
<a class="list">Services</a>
<a class="list">Remote Support</a>
<a class="list">Home</a>
<a class="list">About Us</a>
<a class="list">Contact Us</a>
<div>
</header>
By adding flexbox styling you can get the result you wish.
body{
background-color: #e0e0e0;
}
#banner{
background-color: #404040;
height: 7em;
border-radius: 1em;
box-shadow: -0.1em 0.3em;
display: flex;
padding: 5px;
}
#bannerimg{
height: 65%;
margin-left: 1em;
margin-top: 1em;
}
#container{
background-color: #e0e0e0;
display: flex;
margin-left: auto;
margin-right: auto;
border-radius: 1em;
align-items: center;
}
.list{
padding: 1.1em;
font-size: 1.2em;
color: #067411;
}
<header id="banner">
<div id="container">
<a class="list">Services</a>
<a class="list">Remote Support</a>
<a class="list">Home</a>
<a class="list">About Us</a>
<a class="list">Contact Us</a>
</div>
</header>
I have these blocks of code that I want to stay center the entire time. But I am not sure how. I am hoping you guys could help me out here.
Here is the code
main {
width: 70%;
float: left;
clear: both;
border-right: 1px solid #331a00;
}
main ul {
margin-top: 1em;
margin: auto;
width: 100%;
margin: auto
}
.index {
float: left;
border: 3px solid #b88f61;
margin-top: 1em;
margin-right: 2em;
list-style: none;
}
main ul {
margin-left: 3em
}
.index:hover {
box-shadow: 1px 2px 3px 4px grey;
border: 3px solid #331a00;
}
.index a div h3 {
background-color: #331a00;
padding: .5em;
color: white;
text-decoration: none;
font-weight: bold;
font-size: 100%;
text-align: center;
text-decoration: underline
}
.index a {
text-decoration: none;
}
.index a div img {
width: 150px;
height: 150px;
margin-bottom: -5px
}
#mobile_index {
display: none;
}
#medusa {
background-color: white;
;
}
#intro {
width: 70%;
margin: auto;
margin-bottom: 4em;
clear: both;
font-size: 120%
}
#intro h4 {
text-align: center;
padding: 1em 0;
font-size: 150%;
}
#intro h1 a {
text-decoration: none;
}
#intro h1 {
text-align: center;
}
/*ASIDE*/
aside figure {
width: 100%
}
aside {
width: 24%;
float: right;
margin-top: 1.5em;
}
aside h3 {
font-family: "Times New Roman", serif;
font-size: 1.5em;
font-weight: bolder;
padding-bottom: .5em;
text-align: center;
}
.popular {
display: block;
background-color: #331a00;
color: white;
padding: .5em;
margin-bottom: .3em;
margin-right: .1em;
margin-left: 0;
font-weight: bold;
}
aside figure figcaption {
margin-bottom: 1em;
width: 100%;
background-color: #331a00;
color: white;
font-weight: bold;
padding: .5em 0;
font-size: 1.2vw
}
form {
width: 100%
}
input[type="submit"] {
margin: auto
}
<main>
<h1 id="page_title">The Compendium of Greek Mythology</h1>
<ul>
<li class="index">
<a href="Compendium Gods.html">
<div>
<img src="images/The Gods.jpg" alt="Gods">
<h3>Gods</h3>
</div>
</a>
</li>
<li class="index">
<a href="#" alt="Heroes">
<div>
<img src="images/The Heroes.JPG">
<h3>Heroes</h3>
</div>
</a>
</li>
<li class="index">
<a href="#">
<div>
<img src="images/The Monsters.png" id="medusa" alt="Monsters">
<h3>Beasts</h3>
</div>
</a>
</li>
<li class="index">
<a href="#">
<div>
<img src="images/The Titans.jpg" alt="The_Titans">
<h3>Titans</h3>
</div>
</a>
</li>
<li class="index">
<a href="#">
<div>
<img src="images/The Titans.jpg" alt="The_Giants">
<h3>Giants</h3>
</div>
</a>
</li>
<li class="index">
<a href="#">
<div>
<img src="images/The Gods.jpg" alt="The_Giants">
<h3>Nymphs</h3>
</div>
</a>
</li>
<li class="index">
<a href="#">
<div>
<img src="images/The Gods.jpg" alt="The_Giants">
<h3>Constellations</h3>
</div>
</a>
</li>
</ul>
</main>
<aside>
<div>
<form method="get" action="http://www.google.com/search">
<h3>Search the Compendium</h3>
<input type="search" name="q" size="" maxlength="" placeholder="Google Search">
<input type="hidden" name="domains" value="http://christiaanblom.coolpage.biz">
<input type="hidden" name="sitesearch" value="http://christiaanblom.coolpage.biz"><br>
<input type="submit" name="search" value="Search">
</form>
</div>
<div>
<h3>Popular</h3>
<p class="popular">Zeus</p>
<p class="popular">Poseidon</p>
<p class="popular">Hercules</p>
<p class="popular">Dragon</p>
<p class="popular">Cyclops</p>
<p class="popular">Ares</p>
<p class="popular">Kronos</p>
<p class="popular">Perseus</p>
<p class="popular">Giants</p>
<p class="popular">Gaia</p>
<p class="popular">Oranos</p>
</div>
</aside>
Right now, the .index list items are staying on the left hand side of the main element. I've tried various things, but none of them worked out, which is why I am coming to you guys.
Remove padding and margin from <ul>, add text-align:center;
Remove the float:left; from .index and add display:inline-block;
main {
width: 70%;
float: left;
clear: both;
border-right: 1px solid #331a00;
}
main ul {
margin-top: 1em;
margin: auto;
width: 100%;
margin: auto;
}
/* Remove the float: left; from .index and add display: inline-block; */
.index {
display: inline-block;
border: 3px solid #b88f61;
margin-top: 1em;
margin-right: 2em;
list-style: none;
}
/* Remove padding and margin from UL, add text-align:center; */
main ul {
margin-left: 0;
padding-left: 0;
text-align: center;
}
.index:hover {
box-shadow: 1px 2px 3px 4px grey;
border: 3px solid #331a00;
}
.index a div h3 {
background-color: #331a00;
padding: .5em;
color: white;
text-decoration: none;
font-weight: bold;
font-size: 100%;
text-align: center;
text-decoration: underline;
}
.index a {
text-decoration: none;
}
.index a div img {
width: 150px;
height: 150px;
margin-bottom: -5px
}
#mobile_index {
display: none;
}
#medusa {
background-color: white; /* Removed extra ; */
}
#intro {
width: 70%;
margin: auto;
margin-bottom: 4em;
clear: both;
font-size: 120%;
}
#intro h4 {
text-align: center;
padding: 1em 0;
font-size: 150%;
}
#intro h1 a {
text-decoration: none;
}
#intro h1 {
text-align: center;
}
/*ASIDE*/
aside figure {
width: 100%
}
aside {
width: 24%;
float: right;
margin-top: 1.5em;
}
aside h3 {
font-family: "Times New Roman", serif;
font-size: 1.5em;
font-weight: bolder;
padding-bottom: .5em;
text-align: center;
}
.popular {
display: block;
background-color: #331a00;
color: white;
padding: .5em;
margin-bottom: .3em;
margin-right: .1em;
margin-left: 0;
font-weight: bold;
}
aside figure figcaption {
margin-bottom: 1em;
width: 100%;
background-color: #331a00;
color: white;
font-weight: bold;
padding: .5em 0;
font-size: 1.2vw
}
form {
width: 100%
}
input[type="submit"] {
margin: auto
}
<main>
<h1 id="page_title">The Compendium of Greek Mythology</h1>
<ul>
<li class="index">
<a href="Compendium Gods.html">
<div>
<img src="images/The Gods.jpg" alt="Gods">
<h3>Gods</h3>
</div>
</a>
</li>
<li class="index">
<a href="#" alt="Heroes">
<div>
<img src="images/The Heroes.JPG">
<h3>Heroes</h3>
</div>
</a>
</li>
<li class="index">
<a href="#">
<div>
<img src="images/The Monsters.png" id="medusa" alt="Monsters">
<h3>Beasts</h3>
</div>
</a>
</li>
<li class="index">
<a href="#">
<div>
<img src="images/The Titans.jpg" alt="The_Titans">
<h3>Titans</h3>
</div>
</a>
</li>
<li class="index">
<a href="#">
<div>
<img src="images/The Titans.jpg" alt="The_Giants">
<h3>Giants</h3>
</div>
</a>
</li>
<li class="index">
<a href="#">
<div>
<img src="images/The Gods.jpg" alt="The_Giants">
<h3>Nymphs</h3>
</div>
</a>
</li>
<li class="index">
<a href="#">
<div>
<img src="images/The Gods.jpg" alt="The_Giants">
<h3>Constellations</h3>
</div>
</a>
</li>
</ul>
</main>
<aside>
<div>
<form method="get" action="http://www.google.com/search">
<h3>Search the Compendium</h3>
<input type="search" name="q" size="" maxlength="" placeholder="Google Search">
<input type="hidden" name="domains" value="http://christiaanblom.coolpage.biz">
<input type="hidden" name="sitesearch" value="http://christiaanblom.coolpage.biz"><br>
<input type="submit" name="search" value="Search">
</form>
</div>
<div>
<h3>Popular</h3>
<p class="popular">Zeus</p>
<p class="popular">Poseidon</p>
<p class="popular">Hercules</p>
<p class="popular">Dragon</p>
<p class="popular">Cyclops</p>
<p class="popular">Ares</p>
<p class="popular">Kronos</p>
<p class="popular">Perseus</p>
<p class="popular">Giants</p>
<p class="popular">Gaia</p>
<p class="popular">Oranos</p>
</div>
</aside>
I'm building a panel for a front end system, but I got an annoying problem.
I am not that good with CSS. This is what happens:
This is my HTML code:
#main #myTopMenu #iconBar {
margin-right: 10px;
float: right;
}
#main #myTopMenu #iconBar a {
display: inline-block;
margin-left: 30px;
color: white;
}
#main #myTopMenu #iconBar .optionsContainer {
line-height: 55px;
}
#main #myTopMenu #iconBar .optionsContainer img {
vertical-align: middle;
position: relative;
}
#main #myTopMenu #iconBar .valueWithOption {
background-color: #59a632;
height: 25px;
width: 35px;
position: absolute;
top: 10px;
margin-left: 27px;
border-radius: 4px;
}
#main #myTopMenu #iconBar .valueWithOption span {
background-color: blue;
width: 100%;
height: 100%;
}
<div id="iconBar">
<a href="#">
<div class="optionsContainer">
<img src="images/icons/message.png">
<div class="valueWithOption">
<span>5</span>
</div>
</div>
</a>
<a href="#">
<div class="optionsContainer"><img src="images/icons/bell.png">
<div class="valueWithOption"><span>5</span></div>
</div>
</a>
<a href="#">
<div class="optionsContainer"><img src="images/icons/settings.png"></div>
</a>
</div>
Also do you guys have tips to make it so that the width of the green box expands so that the value in the green box always fits properly.
I made some significant changes to your codes for expected results. See snippet
#iconBar {
margin-right: 10px;
float: right;
}
#iconBar a {
display: inline-block;
margin-left: 30px;
color: white;
}
#iconBar .optionsContainer img {
vertical-align: middle;
position: relative;
}
#iconBar .valueWithOption {
background-color: #59a632;
padding: 5px;
top: 10px;
border-radius: 4px;
position: relative;
top: -10px;
display:inline-block
}
#iconBar .valueWithOption span {
background-color: blue;
width: 100%;
height: 100%;
}
<br>
<br>
<div id="iconBar">
<a href="#">
<div class="optionsContainer">
<img src="images/icons/message.png">
<div class="valueWithOption">
<span>5</span>
</div>
</div>
</a>
<a href="#">
<div class="optionsContainer"><img src="images/icons/bell.png">
<div class="valueWithOption"><span>500</span></div>
</div>
</a>
<a href="#">
<div class="optionsContainer"><img src="images/icons/settings.png"></div>
</a>
</div>
So I'm using hero image for my website which is 100 vh high. Now the image is positioned absolutely, so I could position other elements like logo, nav and text on the image relatively to it. After this section, I want to start new section with new image and other text, but once I start new row, column and try to put new image with h1 text, it's hiding behind earlier image. What I mean is that I want a new section with new image and <h1> text appear under the hero image and not overlap it or hide under it as it is now hiding. It's not floated or anything, my floats are cleared, so I don't get it why is this hapenning.
Here is some codepen so you would understand what is hapenning.
<div class="container-fluid clearfix">
<div class="row">
<div class="col-lg-12">
<div class="hero_img">
<img class="logo" src="assets/logo.png"></img>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".collapse">
☰
</button>
<div class="collapse">
<div class="col-xs-12">
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="#">Lorem</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Lorem</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Lorem</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Lorem</a>
</li>
</ul>
</div>
</div>
<div class="black_box clearfix"><h1>Kolding Bike Marathon</h1></div>
<div class="black_box_sub clearfix"><p>Bring activity to your life again</p></div>
<button type="button" class="btn btn-outline-secondary">Register now</button>
<button type="button" class="btn btn-success">Learn more</button>
</div>
</div>
</div>
</div>
</div>
<div class="section_one">
<h1>heyyyyy</h1>
</div>
.hero_img {
background-image: url("assets/hero.jpg");
width: auto;
height: 100vh;
background-size: cover;
position: absolute;
top: 0;
left: 0;
z-index: 999;
overflow: hidden;
clear: both;
}
.hero_img {
width: 100%;
height: 100vh;
position: absolute;
top: 0;
}
.logo {
position: relative;
left: 20px;
top: 20px;
z-index: 1002;
width: 5%;
min-width: 50px;
}
.nav {
position: relative;
top: 0;
z-index: 1000;
margin-top: 20px;
/*margin-right: 15px;*/
padding: 20px;
/*float: right;*/
width: auto;
flex-direction: column;
background: #555;
/*width: 100%;*/
filter: opacity(0.93);
}
a {
text-decoration: none;
color: white;
display: block;
border-bottom: 1px solid #444;
}
a:hover {
color: #999;
}
.nav-item {
display: block;
}
.navbar-toggler {
/*float: right;*/
display: flex;
justify-content: right;
position: relative;
z-index: 1000;
margin-top: 15px;
margin-right: 15px;
color: white;
float: right;
}
.black_box {
position: relative;
width: 45%;
min-width: 400px;
text-align: center;
z-index: 1000;
background: black;
margin-top: 10%;
padding: 10px 30px;
clear: both;
}
.black_box h1 {
color: white;
/*font-family: 'PT Sans', sans-serif;*/
font-family: 'Montserrat', sans-serif;
font-weight: 600;
letter-spacing: 1.5px;
}
.black_box_sub {
position: relative;
width: 30%;
min-width: 310px;
text-align: center;
z-index: 1001;
background: black;
margin-top: 2%;
clear: both;
margin-left: 90px;
}
.black_box_sub p {
color: white;
padding: 5px 25px;
font-family: 'Montserrat', sans-serif;
text-transform: uppercase;
padding-top: 10px;
padding-bottom: 0px;
}
Codepen: http://codepen.io/Limpuls/pen/NpbwYp
There are multiple items to clean up in the code, but to keep the images from overlapping you can remove both entries of position: absolute; from the .hero_img class.
After that, remove the padding left and right from all of the media queries of container-fluid. This may affect and other padding that was needed in that container but would be a quick path to do what you are asking.