footer background wont work - html

I was trying to make a simple website for school, but my footer background gets too big.
Here's my HTML
<div class="container-fluid">
<nav>
<ul>
<li>Home</li>
<li>Services</li>
<li>Portofolio</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
<article>
<div class="col-md-4">
<img src="images/nature.jpg">
<h1>Lorem ipsum dolor sit amet</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue.
</p>
</div>
</article>
<article>
<div class="col-md-4">
<img src="images/nature.jpg">
<h1>Lorem ipsum dolor sit amet</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue.
</p>
</div>
</article>
<article>
<div class="col-md-4">
<img src="images/nature.jpg">
<h1>Lorem ipsum dolor sit amet</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue.
</p>
</div>
</article>
<article>
<div class="col-md-4">
<img src="images/nature.jpg">
<h1>Lorem ipsum dolor sit amet</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue.
</p>
</div>
</article>
<article>
<div class="col-md-4">
<img src="images/nature.jpg">
<h1>Lorem ipsum dolor sit amet</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue.
</p>
</div>
</article>
<article>
<div class="col-md-4">
<img src="images/nature.jpg">
<h1>Lorem ipsum dolor sit amet</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue.
</p>
</div>
</article>
<article>
<div class="col-md-4">
<img src="images/nature.jpg">
<h1>Lorem ipsum dolor sit amet</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue.
</p>
</div>
</article>
<article>
<div class="col-md-4">
<img src="images/nature.jpg">
<h1>Lorem ipsum dolor sit amet</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue.
</p>
</div>
</article>
<article>
<div class="col-md-4">
<img src="images/nature.jpg">
<h1>Lorem ipsum dolor sit amet</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue.
</p>
</div>
</article>
<article>
<div class="col-md-4">
<img src="images/nature.jpg">
<h1>Lorem ipsum dolor sit amet</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue.
</p>
</div>
</article>
<article>
<div class="col-md-4">
<img src="images/nature.jpg">
<h1>Lorem ipsum dolor sit amet</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue.
</p>
</div>
</article>
<article>
<div class="col-md-4">
<img src="images/nature.jpg">
<h1>Lorem ipsum dolor sit amet</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue.
</p>
</div>
</article>
<div class="footer">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue. </p>
</div>
</div>
and Here is my CSS if anybody has any idea on how to fix it please tell me
i have tried to change sometihngs but my background keeps showing at the top
background-color:#d2d8e0;
}
nav {
background-color: #64f48a;
float: center;
padding: 20px 0px 0px 350px;
}
nav ul li {
padding: 0px 50px 20px 0px;
display: inline-block;
}
nav ul li a {
color: #f0f0f0;
}
nav ul li:hover {
background-color: black;
}
article {
padding: 0px 0px 0px 50px;
}
article img {
padding: 0px 0px 0px 50px;
}
article h1 {
text-align: center;
font-size: 20px;
padding: 0px 0px 0px 0px;
}
article p {
text-align: center;
font-size: 15px;
}
.footer {
background-color: red;
}
.footer p {
text-align: center;
color: #fff;
}


This is an issue with the float applied to bootstrap columns, you should wrap your columns with a row (See Grid System).
You could also add a display property to your footer like so or add a column to enclose your footer: <div class="col-md-12">.
.footer {
background-color: red;
display: inline-block;
width: 100%;
}
Working Example with add .row div.
nav {
background-color: #64f48a;
float: center;
padding: 20px 0px 0px 350px;
}
nav ul li {
padding: 0px 50px 20px 0px;
display: inline-block;
}
nav ul li a {
color: #f0f0f0;
}
nav ul li:hover {
background-color: black;
}
article {
padding: 0px 0px 0px 50px;
}
article img {
padding: 0px 0px 0px 50px;
}
article h1 {
text-align: center;
font-size: 20px;
padding: 0px 0px 0px 0px;
}
article p {
text-align: center;
font-size: 15px;
}
.footer {
background-color: red;
}
.footer p {
text-align: center;
color: #fff;
padding: 50px 10px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<nav>
<ul>
<li>Home
</li>
<li>Services
</li>
<li>Portofolio
</li>
<li>Blog
</li>
<li>Contact
</li>
</ul>
</nav>
<article>
<div class="col-md-4">
<img src="http://placehold.it/150x150/000/fff">
<h1>Lorem ipsum dolor sit amet</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue.
</p>
</div>
</article>
<article>
<div class="col-md-4">
<img src="http://placehold.it/150x150/000/fff">
<h1>Lorem ipsum dolor sit amet</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue.
</p>
</div>
</article>
<article>
<div class="col-md-4">
<img src="http://placehold.it/150x150/000/fff">
<h1>Lorem ipsum dolor sit amet</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue.
</p>
</div>
</article>
<article>
<div class="col-md-4">
<img src="http://placehold.it/150x150/000/fff">
<h1>Lorem ipsum dolor sit amet</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue.
</p>
</div>
</article>
<article>
<div class="col-md-4">
<img src="http://placehold.it/150x150/000/fff">
<h1>Lorem ipsum dolor sit amet</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue.
</p>
</div>
</article>
<article>
<div class="col-md-4">
<img src="http://placehold.it/150x150/000/fff">
<h1>Lorem ipsum dolor sit amet</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue.
</p>
</div>
</article>
<article>
<div class="col-md-4">
<img src="http://placehold.it/150x150/000/fff">
<h1>Lorem ipsum dolor sit amet</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue.
</p>
</div>
</article>
<article>
<div class="col-md-4">
<img src="http://placehold.it/150x150/000/fff">
<h1>Lorem ipsum dolor sit amet</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue.
</p>
</div>
</article>
<article>
<div class="col-md-4">
<img src="http://placehold.it/150x150/000/fff">
<h1>Lorem ipsum dolor sit amet</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue.
</p>
</div>
</article>
<article>
<div class="col-md-4">
<img src="http://placehold.it/150x150/000/fff">
<h1>Lorem ipsum dolor sit amet</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue.
</p>
</div>
</article>
<article>
<div class="col-md-4">
<img src="http://placehold.it/150x150/000/fff">
<h1>Lorem ipsum dolor sit amet</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue.
</p>
</div>
</article>
<article>
<div class="col-md-4">
<img src="http://placehold.it/150x150/000/fff">
<h1>Lorem ipsum dolor sit amet</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue.
</p>
</div>
</article>
</div>
<div class="footer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue.</p>
</div>
</div>


If you're planning to put a sticky footer at the bottom, you'll need need to add a bottom padding to the body so that it pushes the footer down. You'll also need to make sure you actually set a height on the footer.
If you want to learn more about how to do this, check out this post:
https://css-tricks.com/snippets/css/sticky-footer/


Remove the padding-bottom: 200px; from the .footer p

Related

Navbar works only in first click, in second does not work and it wont go back

I am developing a website and on the navbar if I click on one navbar item it works (sends me to that page) but if I click on the other items it wont work (it wont go to another section) and it wont go back either. This happens for every item!
Here are the files:
Here is the html code:
<!DOCTYPE html>
<html>
<body>
<section class="sub-header">
<nav>
<img src="img/logo.png">
<div class="nav-links" id="navLinks">
<i class="fa fa-times" onclick="hideMenu()"></i>
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>COURSE</li>
<li>BLOG</li>
<li>CONTACT</li>
</ul>
</div>
<i class="fa fa-bars" onclick="showMenu()"></i>
</nav>
<h1>Our Courses</h1>
</section>
<section class="course">
<h1>Courses We Offer</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget iaculis dui, quis dapibus diam. Etiam
tellus erat, consectetur eget eros sit amet, tincidunt consectetur erat.</p>
<div class="row">
<div class="course-col">
<h3>Intermediate</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget iaculis dui, quis dapibus
diam.
Etiam
tellus erat, consectetur eget eros sit amet, tincidunt consectetur erat. </p>
</div>
<div class="course-col">
<h3>Degree</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget iaculis dui, quis dapibus
diam.
Etiam
tellus erat, consectetur eget eros sit amet, tincidunt consectetur erat. </p>
</div>
<div class="course-col">
<h3>Post Graduation</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget iaculis dui, quis dapibus
diam.
Etiam
tellus erat, consectetur eget eros sit amet, tincidunt consectetur erat. </p>
</div>
</div>
</section>
<section class="facilities">
<h1>Our Facilities</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent cursus nulla consequat, congue tellus
in,
dictum massa. Proin facilisis arcu erat, ut euismod ex fringilla at.</p>
<div class="row">
<div class="facilities-col">
<img src="./img/library.png">
<h3>World Class Library</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent cursus nulla consequat, congue
tellus in, dictum massa. Proin facilisis arcu erat, ut euismod ex fringilla at.</p>
</div>
<div class="facilities-col">
<img src="./img/basketball.png">
<h3>Largest Play Ground</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent cursus nulla consequat, congue
tellus in, dictum massa. Proin facilisis arcu erat, ut euismod ex fringilla at.</p>
</div>
<div class="facilities-col">
<img src="./img/cafeteria.png">
<h3>Tasty and healthy food</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent cursus nulla consequat, congue
tellus in, dictum massa. Proin facilisis arcu erat, ut euismod ex fringilla at.</p>
</div>
</div>
</section>
<section class="footer">
<h4>About Us</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br> Praesent cursus nulla consequat, congue
tellus
in,
dictum massa <br>. Proin facilisis arcu erat, ut euismod ex fringilla at</p>
<div class="icons">
<i class="fa-brands fa-square-instagram"></i>
<i class="fa-brands fa-square-facebook"></i>
<i class="fa-brands fa-linkedin"></i>
<i class="fa-brands fa-square-twitter"></i>
</div>
</section>
<script>
var navLinks = document.getElementById("navLinks");
function showMenu() {
navLinks.style.right = "0";
}
function hideMenu() {
navLinks.style.right = "-200px";
}
</script>
</body>
</html>

Here in the href attribute you must to specify where the link is going to:
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>COURSE</li>
<li>BLOG</li>
<li>CONTACT</li>
</ul>

Make column elements equal height on each row

This is the layout I want to get:
So regardless of what's contained in these divs, I want all of them to stretch to the height of the largest div on that row so that everything remains alligned.
However, I cannot think of a way that I can make the items have the same height so that they are all aligned. I could use CSS tables (using display: table), but then I'd need to split it up by rows, as opposed to columns, so the semantics would get messed up.
Other than display: table, I feel like there should be a way with flexbox, but I can't for the life of me figure out what it could be. I can make the container div the same with flex by adding another container around the columns, but I'm not sure how I'd use that to make the children have the same height.
I could also use Javascript to loop through all of them, but that fees like a horrible, inefficient solution.
Here's some code which shows A) What I want to have, regardless of the content inside the divs, and B) what currently happens.
Codepen
* {
font-family: Helvetica, sans-serif;
}
h2 {
text-align: center;
clear: both;
padding-top: 2em;
}
.col {
float: left;
width: 30%;
background-color: #ebebeb;
margin-left: 1em;
}
.col div {
padding: 1em;
width: 80%;
margin: 0 auto;
}
.col .sectionOne {
background-color: #2b2b2b;
color: #fff;
}
.col .sectionTwo {
background-color: #5f5f5f;
color: #fff;
margin-top: 1em;
}
.col .sectionThree {
background-color: #8c8c8c;
color: #fff;
margin-top: 1em;
}
<h2>Everything Aligned. The world is a happy place.</h2>
<div class="col">
<div class="sectionOne">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="sectionTwo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus et, venenatis dolor.
</div>
<div class="sectionThree">
Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
</div>
</div>
<div class="col">
<div class="sectionOne">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="sectionTwo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus et, venenatis dolor.
</div>
<div class="sectionThree">
Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
</div>
</div>
<div class="col">
<div class="sectionOne">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="sectionTwo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus et, venenatis dolor.
</div>
<div class="sectionThree">
Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
</div>
</div>
<h2>Misaligned. Chaos descends.</h2>
<div class="col">
<div class="sectionOne">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="sectionTwo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus
et, venenatis dolor.
</div>
<div class="sectionThree">
Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
</div>
</div>
<div class="col">
<div class="sectionOne">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="sectionTwo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus et, venenatis dolor.
</div>
<div class="sectionThree">
Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
</div>
</div>
<div class="col">
<div class="sectionOne">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Adipiscing elit.Lorem ipsum
dolor sit amet, consectetur adipiscing elit.
</div>
<div class="sectionTwo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus et, venenatis dolor. Curabitur in eros ornare, ultricies tellus et, venenatis dolor.
</div>
<div class="sectionThree">
Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
</div>
</div>
EDIT:
Each .col represents a post in the Wordpress archive page, so it must be arranged in columns.

The only way to do that with Flexbox, if not to use script, is to remove the col and use the order property to visually position them column wise.
The reason is simple, the sections need to be siblings to enable equal height per row.
Based on how many items it will be, one might need to group them to keep the necessary CSS rules on a reasonable level, though as that is not available in the question, I here show a solution based on the existing amount of items.
As a replacement for the removed col's background color, I used a border to make it simple, but one can i.e. use pseudo elements or an extra inner element to accomplish the same effect.
Updated codepen
Stack snippet
* {
font-family: Helvetica, sans-serif;
}
.cols {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-pack: distribute;
justify-content: space-around;
}
.cols div {
padding: 1em;
border: 1em solid #ebebeb;
box-sizing: border-box;
width: 30%;
}
.cols .sectionOne {
background-color: #2b2b2b;
color: #fff;
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
}
.cols .sectionTwo {
background-color: #5f5f5f;
color: #fff;
border-width: 0 1em 1em 1em;
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
}
.cols .sectionThree {
background-color: #8c8c8c;
color: #fff;
border-width: 0 1em 1em 1em;
-webkit-box-ordinal-group: 4;
-ms-flex-order: 3;
order: 3;
}
<div class="cols">
<div class="sectionOne">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="sectionTwo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus
et, venenatis dolor.
</div>
<div class="sectionThree">
Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
</div>
<div class="sectionOne">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="sectionTwo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus et, venenatis dolor.
</div>
<div class="sectionThree">
Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
</div>
<div class="sectionOne">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Adipiscing elit.Lorem ipsum
dolor sit amet, consectetur adipiscing elit.
</div>
<div class="sectionTwo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus et, venenatis dolor. Curabitur in eros ornare, ultricies tellus et, venenatis dolor.
</div>
<div class="sectionThree">
Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
</div>
</div>
Updated
As mentioned, and as a sample for more than 3 posts, and a 3 column layout, one can simply repeat the above solution, with an extra rule giving all but the first cols a top margin.
Stack snippet
* {
font-family: Helvetica, sans-serif;
}
.cols {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-pack: distribute;
justify-content: space-around;
}
.cols + .cols {
margin-top: 1em;
}
.cols div {
padding: 1em;
border: 1em solid #ebebeb;
box-sizing: border-box;
width: 30%;
}
.cols .sectionOne {
background-color: #2b2b2b;
color: #fff;
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
}
.cols .sectionTwo {
background-color: #5f5f5f;
color: #fff;
border-width: 0 1em 1em 1em;
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
}
.cols .sectionThree {
background-color: #8c8c8c;
color: #fff;
border-width: 0 1em 1em 1em;
-webkit-box-ordinal-group: 4;
-ms-flex-order: 3;
order: 3;
}
<div class="cols">
<div class="sectionOne">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="sectionTwo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus
et, venenatis dolor.
</div>
<div class="sectionThree">
Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
</div>
<div class="sectionOne">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="sectionTwo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus et, venenatis dolor.
</div>
<div class="sectionThree">
Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
</div>
<div class="sectionOne">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Adipiscing elit.Lorem ipsum
dolor sit amet, consectetur adipiscing elit.
</div>
<div class="sectionTwo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus et, venenatis dolor. Curabitur in eros ornare, ultricies tellus et, venenatis dolor.
</div>
<div class="sectionThree">
Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
</div>
</div>
<div class="cols">
<div class="sectionOne">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="sectionTwo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum.
</div>
<div class="sectionThree">
Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
</div>
<div class="sectionOne">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="sectionTwo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus et, venenatis dolor.
</div>
<div class="sectionThree">
Cras eget lectus non dolor congue dapibus in id massa.
</div>
<div class="sectionOne">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="sectionTwo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus et, venenatis dolor. Curabitur in eros ornare, ultricies tellus et, venenatis dolor.
</div>
<div class="sectionThree">
Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus.
</div>
</div>

In the futur , you may use grid and a single container:
* {
font-family: Helvetica, sans-serif;
}
h2 {
text-align: center;
clear: both;
padding-top: 2em;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 1em;
background: repeating-linear-gradient(to right, transparent 1%, #ebebeb 1%, #ebebeb 33%, transparent 33%, transparent 34%);
}
div {
padding: 1em;
}
div div {
margin: 0 4%;
}
.sectionOne {
background-color: #2b2b2b;
color: #fff;
grid-row: 1
}
.sectionTwo {
background-color: #5f5f5f;
color: #fff;
grid-row: 2
}
.sectionThree {
background-color: #8c8c8c;
color: #fff;
}
.grid {counter-reset:div}
.grid>div:before {
counter-increment:div;
content:'div number:'counter(div);
background:yellow;
color:red;
padding:0 0.5em;
font-size:0.75em;
}
<h2>Everything Aligned. The world is a happy place.</h2>
<div class="grid">
<!-- first post-->
<div class="sectionOne">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="sectionTwo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur
in eros ornare, ultricies tellus et, venenatis dolor.
</div>
<div class="sectionThree">
Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
</div>
<!-- end first post-->
<!-- second post-->
<div class="sectionOne">
Lorem ipsum dolor sit amet, <br/>consectetur adipiscing elit.
</div>
<div class="sectionTwo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus et, venenatis dolor.
</div>
<div class="sectionThree">
Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
</div>
<!-- end second post-->
<!-- third post-->
<div class="sectionOne">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="sectionTwo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus et, venenatis dolor.
</div>
<div class="sectionThree">
Cras eget lectus lorem
</div>
<!-- end third post-->
</div>
usefull ressource :
https://css-tricks.com/snippets/css/complete-guide-grid/
http://gridbyexample.com/
and the codepen to play with
Are you arrived in the future yet ? check it out here http://caniuse.com/#search=grid ;)

This can be accomplished with flexbox, though note that it isn't fully supported in Internet Explorer 11.
First, replace your float: left on .col with display: flex.
Second, move your margin-top: 1em declarations to .col.
* {
font-family: Helvetica, sans-serif;
}
h2 {
text-align: center;
clear: both;
padding-top: 2em;
}
.col {
display: flex;
margin-top: 1em;
background-color: #ebebeb;
}
.col div {
padding: 1em;
width: 80%;
margin: 0 auto;
}
.col .sectionOne {
background-color: #2b2b2b;
color: #fff;
}
.col .sectionTwo {
background-color: #5f5f5f;
color: #fff;
}
.col .sectionThree {
background-color: #8c8c8c;
color: #fff;
}
<h2>Everything Aligned. The world is a happy place.</h2>
<div class="col">
<div class="sectionOne">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="sectionTwo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus et, venenatis dolor.
</div>
<div class="sectionThree">
Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
</div>
</div>
<div class="col">
<div class="sectionOne">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="sectionTwo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus et, venenatis dolor.
</div>
<div class="sectionThree">
Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
</div>
</div>
<div class="col">
<div class="sectionOne">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="sectionTwo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus et, venenatis dolor.
</div>
<div class="sectionThree">
Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
</div>
</div>
<h2>Misaligned. Chaos descends.</h2>
<div class="col">
<div class="sectionOne">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="sectionTwo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus
et, venenatis dolor.
</div>
<div class="sectionThree">
Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
</div>
</div>
<div class="col">
<div class="sectionOne">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="sectionTwo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus et, venenatis dolor.
</div>
<div class="sectionThree">
Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
</div>
</div>
<div class="col">
<div class="sectionOne">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Adipiscing elit.Lorem ipsum
dolor sit amet, consectetur adipiscing elit.
</div>
<div class="sectionTwo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus et, venenatis dolor. Curabitur in eros ornare, ultricies tellus et, venenatis dolor.
</div>
<div class="sectionThree">
Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
</div>
</div>
Note that flexbox doesn't have collapsing margins or anything like border-spacing for tables. This can be resolved by setting margin on .col div, though you may want to change the background.
Also, your use of the name .col is counter-intuitive, as you actually have three sections per row. You might want to watch out for that!
Hope this helps! :)

If you organize them in rows instead of columns, you can use display: flexon the (row) containers, which has the effect you want. Note: I also used fixed (percentage) width settings on the child elements to achieve this.
.col {
display: flex;
margin-bottom: 10px;
}
.col>div {
width: 31%;
margin: 1%;
background: #ddd;
}
<div class="col">
<div class="sectionOne">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="sectionTwo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus
et, venenatis dolor.
</div>
<div class="sectionThree">
Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
</div>
</div>
<div class="col">
<div class="sectionOne">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="sectionTwo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus et, venenatis dolor.
</div>
<div class="sectionThree">
Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
</div>
</div>
<div class="col">
<div class="sectionOne">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Adipiscing elit.Lorem ipsum
dolor sit amet, consectetur adipiscing elit.
</div>
<div class="sectionTwo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus et, venenatis dolor. Curabitur in eros ornare, ultricies tellus et, venenatis dolor.
</div>
<div class="sectionThree">
Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
</div>
</div>

Here's a simple solution using CSS Grid Layout.
Features:
all rows are the height of the tallest element in the row
the elements flow in columns, not rows
extra HTML containers can be removed
the code is simple and efficient
codepen
body {
display: grid;
grid-template-rows: repeat(3, auto);
grid-auto-columns: 1fr;
grid-auto-flow: column;
grid-gap: 1em;
padding: 1em;
}
.sectionOne { background-color: #2b2b2b; }
.sectionTwo { background-color: #5f5f5f; }
.sectionThree { background-color: #8c8c8c; }
div { padding: 1em; color: #fff; }
<div class="sectionOne">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="sectionTwo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus et, venenatis dolor.
</div>
<div class="sectionThree">
Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
</div>
<div class="sectionOne">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="sectionTwo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus et, venenatis dolor.
</div>
<div class="sectionThree">
Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
</div>
<div class="sectionOne">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="sectionTwo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus et, venenatis dolor. Curabitur in eros ornare, ultricies tellus et, venenatis dolor.
</div>
<div class="sectionThree">
Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
</div>
Browser Support for CSS Grid
Chrome - full support as of March 8, 2017 (version 57)
Firefox - full support as of March 6, 2017 (version 52)
Safari - full support as of March 26, 2017 (version 10.1)
Edge - full support as of October 16, 2017 (version 16)
IE11 - no support for current spec; supports obsolete version
Here's the complete picture: http://caniuse.com/#search=grid

ul li border bottom is NOT full width

I am very sorry if this question might be duplicated a lot. But I've done a lot of searching about this question but still cannot find a solution. How can I make ul li border-bottom full width?
body {
background: blue;
}
.Table .Content {
background: #fff;
color: #fefeff;
}
.Table .Content ul {
padding: 15px 20px 10px;
margin: 0;
text-align: left;
}
.Table .Content ul li {
font-size: 14px;
padding: 12px 0;
border-bottom: 1px solid #e1e1e1;
color: #000;
}
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="Table">
<div class="Content">
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean semper at sapien ut accumsan. Fusce consequat nec eros vel suscipit. Vestibulum sit amet ornare erat, sed porttitor metus.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean semper at sapien ut accumsan. Fusce consequat nec eros vel suscipit. Vestibulum sit amet ornare erat, sed porttitor metus.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean semper at sapien ut accumsan. Fusce consequat nec eros vel suscipit. Vestibulum sit amet ornare erat, sed porttitor metus.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean semper at sapien ut accumsan. Fusce consequat nec eros vel suscipit. Vestibulum sit amet ornare erat, sed porttitor metus.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean semper at sapien ut accumsan. Fusce consequat nec eros vel suscipit. Vestibulum sit amet ornare erat, sed porttitor metus.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean semper at sapien ut accumsan. Fusce consequat nec eros vel suscipit. Vestibulum sit amet ornare erat, sed porttitor metus.</li>
</ul>
</div>
</div>
</div>
</div>
</div>
Any of the response will be greatly appreciated.

For this you need to give 'left/right' padding to li instead of ul
.Table .Content {
background: #fff;
color: #fefeff;
}
.Table .Content ul {
padding: 15px 0px 10px;
margin: 0;
text-align: left;
list-style-position:inside;
}
.Table .Content ul li {
font-size: 14px;
padding: 12px 20px;
border-bottom: 1px solid #e1e1e1;
color: #000;
}
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="Table">
<div class="Content">
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean semper at sapien ut accumsan. Fusce consequat nec eros vel suscipit. Vestibulum sit amet ornare erat, sed porttitor metus.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean semper at sapien ut accumsan. Fusce consequat nec eros vel suscipit. Vestibulum sit amet ornare erat, sed porttitor metus.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean semper at sapien ut accumsan. Fusce consequat nec eros vel suscipit. Vestibulum sit amet ornare erat, sed porttitor metus.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean semper at sapien ut accumsan. Fusce consequat nec eros vel suscipit. Vestibulum sit amet ornare erat, sed porttitor metus.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean semper at sapien ut accumsan. Fusce consequat nec eros vel suscipit. Vestibulum sit amet ornare erat, sed porttitor metus.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean semper at sapien ut accumsan. Fusce consequat nec eros vel suscipit. Vestibulum sit amet ornare erat, sed porttitor metus.</li>
</ul>
</div>
</div>
</div>
</div>
</div>

.Table .Content {
background: #fff;
color: #fefeff;
}
.Table .Content ul {
padding: 15px 20px 10px;
margin: 0;
text-align: left;
}
.Table .Content ul li {
font-size: 14px;
padding: 12px 0;
border-bottom: 1px solid #e1e1e1;
color: #000;
list-style-position: inside;
}
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="Table">
<div class="Content">
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean semper at sapien ut accumsan. Fusce consequat nec eros vel suscipit. Vestibulum sit amet ornare erat, sed porttitor metus.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean semper at sapien ut accumsan. Fusce consequat nec eros vel suscipit. Vestibulum sit amet ornare erat, sed porttitor metus.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean semper at sapien ut accumsan. Fusce consequat nec eros vel suscipit. Vestibulum sit amet ornare erat, sed porttitor metus.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean semper at sapien ut accumsan. Fusce consequat nec eros vel suscipit. Vestibulum sit amet ornare erat, sed porttitor metus.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean semper at sapien ut accumsan. Fusce consequat nec eros vel suscipit. Vestibulum sit amet ornare erat, sed porttitor metus.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean semper at sapien ut accumsan. Fusce consequat nec eros vel suscipit. Vestibulum sit amet ornare erat, sed porttitor metus.</li>
</ul>
</div>
</div>
</div>
</div>
</div>

CSS to child p tag not getting applied based on parent div's class

I have to apply different styles to p tag which is created under to 2 seprate divs.
.wrapper .extraclass p{
color: green;
}
.wrapper .class1 p{
color: red;
}
<div class="wrapper">
<div class="class1 class2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc condimentum neque eu mauris eleifend, eget dapibus diam pulvinar. Curabitur hendrerit massa ut dui ultrices.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="wrapper">
<div class="extraclass class1 class2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc condimentum neque eu mauris eleifend, eget dapibus diam pulvinar. Curabitur hendrerit massa ut dui ultrices.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
The color for both p's is same. How can I reorganize my css to make this work?

Put you css in this way, so it can override above global css,
.wrapper .class1 p{
color: red;
}
.wrapper .extraclass p{
color: green;
}
.wrapper .class1 p will select all p tags within .class1 if you want to override css of .extraclass p you have to put it after .wrapper .class1 p css
.wrapper .class1 p {
color: red;
}
.wrapper .extraclass p {
color: green;
}
<div class="wrapper">
<div class="class1 class2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc condimentum neque eu mauris eleifend, eget dapibus diam pulvinar. Curabitur hendrerit massa ut dui ultrices.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div>
<div>
<div class="wrapper">
<div class="extraclass class1 class2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc condimentum neque eu mauris eleifend, eget dapibus diam pulvinar. Curabitur hendrerit massa ut dui ultrices.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div>
<div>

The problem might be that you have both .extraclass and .class1 in the lasp p-tag
Try reorder them so it says " class1 class2 extraclass".
If not then you might have to remove class1 form the last p-tag.
Or you can always put !important behind the "color: red" but I would not recommend this :)

Your CSS was fine.. I just restructured your HTML a bit:
.wrapper .extraclass p {
color: green;
}
.wrapper .class1 p {
color: red;
}
<div class="wrapper">
<div class="class1 class2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc condimentum neque eu mauris eleifend, eget dapibus diam pulvinar. Curabitur hendrerit massa ut dui ultrices.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="wrapper">
<div class="extraclass">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc condimentum
neque eu mauris eleifend, eget dapibus diam pulvinar. Curabitur hendrerit
massa ut dui ultrices.Lorem ipsum dolor sit amet, consectetur adipiscing
elit.</p>
</div>
</div>
I took out the class1 from extraclass and corrected the unclosed <div>s
Look here: http://codepen.io/anon/pen/ZeRKJZ

Just give the correct priority of style
the below class will override upper class
.wrapper .class1 p{
color: red;
}
.wrapper .extraclass p{
color: green;
}
<div class="wrapper">
<div class="class1 class2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc condimentum neque eu mauris eleifend, eget dapibus diam pulvinar. Curabitur hendrerit massa ut dui ultrices.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div>
<div>
<div class="wrapper">
<div class="extraclass class1 class2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc condimentum neque eu mauris eleifend, eget dapibus diam pulvinar. Curabitur hendrerit massa ut dui ultrices.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div>
<div>

Your second class definition overrode the first when being applied to p. I recommend having one definition for classes that will always have shared properties (using .wrapper or something else) and peculiar properties in another class or id.
Also, please make better use of indenting and use </div> to close off a div.
.extraclass
{
color: blue;
}
.class1
{
color: red;
}
<div class="wrapper">
<div class="class1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc condimentum neque eu mauris eleifend, eget dapibus diam pulvinar. Curabitur hendrerit massa ut dui ultrices.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="wrapper">
<div class="extraclass">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc condimentum neque eu mauris eleifend, eget dapibus diam pulvinar. Curabitur hendrerit massa ut dui ultrices.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>

Border out DIV (borde fuera de div)

I have problems in CSS with the property Padding or Border. I have an image within a div that fits perfect, but to add margin exceeds the div that contains it.
<div class="content">
<div class="row" />
<div class="ima">
<h1>Titulo 1</h1>
<img class="img" src="https://sites.google.com/site/cnetuc/imagen-04.jpg" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas laoreet mattis arcu eget euismod. Donec eget purus et enim cursus feugiat sit amet in diam.
<p>
</div>
<div class="ima">
<h1>Titulo 1</h1>
<img class="img" src="https://sites.google.com/site/cnetuc/imagen-04.jpg" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas laoreet mattis arcu eget euismod. Donec eget purus et enim cursus feugiat sit amet in diam.
<p>
</div>
<div class="ima">
<h1>Titulo 1</h1>
<img class="img" src="https://sites.google.com/site/cnetuc/imagen-04.jpg" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas laoreet mattis arcu eget euismod. Donec eget purus et enim cursus feugiat sit amet in diam.
<p>
</div>
</div>
</div>
Attached fiddle

Add box-sizing: border-box; to the image.
.ima img{
width:100%;
border:10px solid rgba(0, 0, 0, 0.3);
box-sizing: border-box;
}

Try to
box-sizing: border-box;
Or
width: calc(100% - 20px);