ul li border bottom is NOT full width - html

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>

Related

How to group HTML elements so they move together within a div with a "columns" styling?

I'm using a basic Jekyll site with Minima CSS. I want to use a post format with two columns of content:
<div style="columns: 2;">...</div>
Each content group consists of a link, an image tag, a title enclosed with p-tags, and a break.
I want the group to move together. Each link/image/title/break construct should remain in the same column.
I've tried surrounding each group with divs and with section tags - no luck.
Suggestions?

In order to prevent children of a parent that's using columns from breaking across columns, you can wrap them in a container that is display: inline-block.
The specific tag you use for this container is up to you. If you want to use a section, go for it.
Example:
ul {
column-count: 2;
list-style: none;
padding-left: 0;
margin: 0;
}
li {
display: inline-block;
border-bottom: 1px solid gray;
padding-bottom: 12px;
}
<ul>
<li>
<div>
<p>I won't break across columns!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur ultrices suscipit. Etiam fringilla porta tellus. Phasellus vitae semper dui. In non massa non sapien porttitor feugiat a ac velit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur ultrices suscipit. Etiam fringilla porta tellus. Phasellus vitae semper dui. In non massa non sapien porttitor feugiat a ac velit.</p>
</div>
</li>
<li>
<div>
<p>I won't break across columns!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur ultrices suscipit. Etiam fringilla porta tellus. Phasellus vitae semper dui. In non massa non sapien porttitor feugiat a ac velit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur ultrices suscipit. Etiam fringilla porta tellus. Phasellus vitae semper dui. In non massa non sapien porttitor feugiat a ac velit.</p>
</div>
</li>
<li>
<div>
<p>I won't break across columns!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur ultrices suscipit. Etiam fringilla porta tellus. Phasellus vitae semper dui. In non massa non sapien porttitor feugiat a ac velit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur ultrices suscipit. Etiam fringilla porta tellus. Phasellus vitae semper dui. In non massa non sapien porttitor feugiat a ac velit.</p>
</div>
</li>
</ul>

Position sticky with parent padding-top

I'm trying to make something work with position: sticky; but I get some strange behaviour.
.parent {
display: inline-block;
height: 300px;
width: 300px;
overflow: scroll;
padding-top: 25px;
}
.parent--ok {
background-color: green;
}
.parent--nok {
background-color:red;
}
.sticky-header {
position: sticky;
top: 25px;
background-color: purple;
}
<div class="parent parent--ok">
<div class="sticky-header">Sticky</div>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt lectus risus, volutpat auctor mi mollis vitae. Nullam eget scelerisque odio. Cras enim ante, cursus quis feugiat id, maximus sed nibh.</div>
<div class="sticky-header">Sticky 2</div>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt lectus risus, volutpat auctor mi mollis vitae. Nullam eget scelerisque odio. Cras enim ante, cursus quis feugiat id, maximus sed nibh.</div>
<div class="sticky-header">Sticky 3</div>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt lectus risus, volutpat auctor mi mollis vitae. Nullam eget scelerisque odio. Cras enim ante, cursus quis feugiat id, maximus sed nibh.</div>
<div class="sticky-header">Sticky 4</div>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt lectus risus, volutpat auctor mi mollis vitae. Nullam eget scelerisque odio. Cras enim ante, cursus quis feugiat id, maximus sed nibh.</div>
</div>
<div class="parent parent--nok">
<div class="sticky-header">Sticky</div>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt lectus risus, volutpat auctor mi mollis vitae. Nullam eget scelerisque odio. Cras enim ante, cursus quis feugiat id, maximus sed nibh.</div>
<div class="sticky-header">Sticky 2</div>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt lectus risus, volutpat auctor mi mollis vitae. Nullam eget scelerisque odio. Cras enim ante, cursus quis feugiat id, maximus sed nibh.</div>
</div>
I made a pen here https://codepen.io/anon/pen/NzJENe so you can see what I mean.
I have a parent element that has a padding-top: 25px;, in there I have an undefined number of div pairs consisting of a header and a content. I want the headers to be sticky but with respect of the 25px padding of the parent. So I added top: 25px; to them. String thing is that this works as long as I have enough pairs in my parent to have an overflow. If I don't have an overflow my headers get an extra 25px spacing above, which I don't want.
this is how it looks for me:
EDIT: This was tested in chrome.

Sticky is a bit tricky, just because it is an hybrid in between fixed and relative positioned. Using top different from a 0 value for a sticky element may lead to strange behavior. I guess this is what you experienced in Chrome.
More over, you have different behavior with different browsers (or not)...
I would go for an additional container (in the sample, named .holder to preserve this padding-top of 25px.
HTML
<div class="parent parent--ok">
<div class="holder">
<div class="sticky-header">Sticky</div>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt lectus risus, volutpat auctor mi mollis vitae. Nullam eget scelerisque odio. Cras enim ante, cursus quis feugiat id, maximus sed nibh.</div>
<div class="sticky-header">Sticky 2</div>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt lectus risus, volutpat auctor mi mollis vitae. Nullam eget scelerisque odio. Cras enim ante, cursus quis feugiat id, maximus sed nibh.</div>
<div class="sticky-header">Sticky 3</div>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt lectus risus, volutpat auctor mi mollis vitae. Nullam eget scelerisque odio. Cras enim ante, cursus quis feugiat id, maximus sed nibh.</div>
<div class="sticky-header">Sticky 4</div>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt lectus risus, volutpat auctor mi mollis vitae. Nullam eget scelerisque odio. Cras enim ante, cursus quis feugiat id, maximus sed nibh.</div>
</div>
</div>
<div class="parent parent--nok">
<div class="holder">
<div class="sticky-header">Sticky</div>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt lectus risus, volutpat auctor mi mollis vitae. Nullam eget scelerisque odio. Cras enim ante, cursus quis feugiat id, maximus sed nibh.</div>
<div class="sticky-header">Sticky 2</div>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt lectus risus, volutpat auctor mi mollis vitae. Nullam eget scelerisque odio. Cras enim ante, cursus quis feugiat id, maximus sed nibh.</div>
</div>
</div>
CSS
.parent {
display: inline-block;
height: 300px;
width: 300px;
padding-top: 25px;
}
.holder{
height: 100%;
overflow: scroll;
}
.parent--ok {
background-color: green;
}
.parent--nok {
background-color:red;
}
.sticky-header {
position: sticky;
top: 0;
background-color: purple;
}
This is the Jsfiddle

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

Paragraph is displaying below of image

I have to display image and paragraph in one line but when paragraph content is more, then text are displaying below of image that I don't want. I have to display text in one line.
I need output like this.
.test1{
padding: 0 30px;
}
.test1 p img{
width: 20px;
}
<div class="test1">
<p><img src="http://cloudhostingasp.net/wp-content/uploads/2017/02/GlobeSoft-Check-Icon.png"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tellus nisl, molestie vitae nibh nec, dictum dignissim dui.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tellus nisl, molestie vitae nibh nec, dictum dignissim dui.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tellus nisl, molestie vitae nibh nec, dictum dignissim dui.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tellus nisl, molestie vitae nibh nec, dictum dignissim dui.</span></p>
<p><img src="http://cloudhostingasp.net/wp-content/uploads/2017/02/GlobeSoft-Check-Icon.png">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tellus nisl, molestie vitae nibh nec, dictum dignissim dui.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tellus nisl, molestie vitae nibh nec, dictum dignissim dui.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tellus nisl, molestie vitae nibh nec, dictum dignissim dui.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tellus nisl, molestie vitae nibh nec, dictum dignissim dui.</p>
</div>

Try to margin-left negative amount and add to the right some positive it will arrange it.
.test1{
padding: 0 30px;
}
.test1 p img{
width: 20px;
position: relative;
margin-left: -25px;
margin-right: 10px;
vertical-align: middle;
}
<div class="test1">
<p><img src="http://cloudhostingasp.net/wp-content/uploads/2017/02/GlobeSoft-Check-Icon.png"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tellus nisl, molestie vitae nibh nec, dictum dignissim dui.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tellus nisl, molestie vitae nibh nec, dictum dignissim dui.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tellus nisl, molestie vitae nibh nec, dictum dignissim dui.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tellus nisl, molestie vitae nibh nec, dictum dignissim dui.</span></p>
<p><img src="http://cloudhostingasp.net/wp-content/uploads/2017/02/GlobeSoft-Check-Icon.png">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tellus nisl, molestie vitae nibh nec, dictum dignissim dui.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tellus nisl, molestie vitae nibh nec, dictum dignissim dui.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tellus nisl, molestie vitae nibh nec, dictum dignissim dui.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tellus nisl, molestie vitae nibh nec, dictum dignissim dui.</p>
</div>

You're close. The missing puzzle piece is a negative text-indent and a bit of margin for the image to breathe:
.test1{
padding: 0 0 0 30px;
text-indent: -30px;
}
.test1 p img{
width: 20px;
margin-right: 10px;
}
<div class="test1">
<p><img src="http://cloudhostingasp.net/wp-content/uploads/2017/02/GlobeSoft-Check-Icon.png"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tellus nisl, molestie vitae nibh nec, dictum dignissim dui.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tellus nisl, molestie vitae nibh nec, dictum dignissim dui.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tellus nisl, molestie vitae nibh nec, dictum dignissim dui.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tellus nisl, molestie vitae nibh nec, dictum dignissim dui.</span></p>
<p><img src="http://cloudhostingasp.net/wp-content/uploads/2017/02/GlobeSoft-Check-Icon.png">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tellus nisl, molestie vitae nibh nec, dictum dignissim dui.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tellus nisl, molestie vitae nibh nec, dictum dignissim dui.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tellus nisl, molestie vitae nibh nec, dictum dignissim dui.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tellus nisl, molestie vitae nibh nec, dictum dignissim dui.</p>
</div>

You could use the list-style-image of ul. Although you will still see a black bullet, try using a small image, like an icon, then change the url
ul {
list-style-image: url('someSmallImg.png');
}
<div>
<ul>
<li>asdasd</li>
<li>dhgfhgfh</li>
</ul>
</div>

How do I fix these gaps between each list item?

I am creating a portfolio for myself and I am struggling with these list items. I want them to be the same height and inline with each other. In each list item there is one extra line and I believe that is what is causing it. How would I fix this?
Here is what it looks like:
Picture of the problem
#content-wrapper {
background-color: #EBEBEB;
margin: 0 auto;
width: 100%;
border-top: 2.5px solid #0F0F0F;
}
#content-wrapper ul {
list-style-type: none;
margin: 0 auto;
width: 100%;
padding: 0;
text-align: center;
}
#content-wrapper ul li {
background-color: whitesmoke;
color: #1B1B1B;
text-align: center;
display: inline-block;
margin: 5px 2.5px;
width: 45%;
}
#content-wrapper ul li p {
padding: 10px;
height: 150px;
}
#content-wrapper ul li img {
width: 100%;
}
<div id="content-wrapper">
<ul>
<li>
<img src="http://ashleye.co.uk/img/portfolio-1.png">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</li>
<li>
<img src="http://ashleye.co.uk/img/portfolio-1.png">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed leo ligula, placerat at interdum vitae, maximus id leo.</p>
</li>
<li>
<img src="http://ashleye.co.uk/img/portfolio-1.png">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed leo ligula, placerat at interdum vitae, maximus id leo. Donec pellentesque, leo sed aliquet vulputate, orci dui commodo tellus, et tempus nunc nulla quis diam.</p>
</li>
<li>
<img src="http://ashleye.co.uk/img/portfolio-1.png">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed leo ligula, placerat at interdum vitae, maximus id leo. Donec pellentesque, leo sed aliquet vulputate, orci dui commodo tellus, et tempus nunc nulla quis diam. Vivamus diam neque, pellentesque
at euismod et, tincidunt vitae eros.</p>
</li>
<li>
<img src="http://ashleye.co.uk/img/portfolio-1.png">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed leo ligula, placerat at interdum vitae, maximus id leo. Donec pellentesque, leo sed aliquet vulputate, orci dui commodo tellus, et tempus nunc nulla quis diam. Vivamus diam neque, pellentesque
at euismod et, tincidunt vitae eros. Vivamus mi justo, volutpat ut nisl sed, dictum pellentesque odio.</p>
</li>
<li>
<img src="http://ashleye.co.uk/img/portfolio-1.png">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed leo ligula, placerat at interdum vitae, maximus id leo. Donec pellentesque, leo sed aliquet vulputate, orci dui commodo tellus, et tempus nunc nulla quis diam. Vivamus diam neque, pellentesque
at euismod et, tincidunt vitae eros. Vivamus mi justo, volutpat ut nisl sed, dictum pellentesque odio. Nunc metus quam, rutrum sed metus convallis, egestas sodales quam.</p>
</li>
</ul>
</div>

there is another version of your code for you. everything is in line here.
any other questions, just ask :)
<div class="project">
<img src="http://ashleye.co.uk/img/portfolio-1.png">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="project">
<img src="http://ashleye.co.uk/img/portfolio-1.png">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="project">
<img src="http://ashleye.co.uk/img/portfolio-1.png">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="project">
<img src="http://ashleye.co.uk/img/portfolio-1.png">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
body{
margin:0;
padding:0;
}
#wrapper{
width:100%;
height:2000px;
background:#eee;
}
#portfolio{
width:900px;
height:1200px;
margin:auto;
}
.project{
width:47.5%;
height:400px;
background:#fff;
float:left;
margin:10px 2.5% 0 0;
}
.project img{
width:80%;
height:auto;
margin-left:10%;
}
.project p{
text-align:center;
}
http://codepen.io/raze444/pen/mOBjOx?editors=1100

replace inline-block with inline-table on #content-wrapper ul li for instant solution LiveOnFiddle . On small screen the last li p element overflow coz of the p tag height 150px. So you can change it 200px or write media query for small screen.
#content-wrapper {
background-color: #EBEBEB;
margin: 0 auto;
width: 100%;
border-top: 2.5px solid #0F0F0F;
}
#content-wrapper ul {
list-style-type: none;
margin: 0 auto;
width: 100%;
padding: 0;
text-align: center;
}
#content-wrapper ul li {
background-color: whitesmoke;
color: #1B1B1B;
text-align: center;
display: inline-table;/*Change inline-block to inline-table*/
margin: 5px 2.5px;
width: 45%;
}
#content-wrapper ul li p {
padding: 10px;
height: 200px; /*Change the height 150px to 200px*/
}
#content-wrapper ul li img {
width: 100%;
}
<div id="content-wrapper">
<ul>
<li>
<img src="http://ashleye.co.uk/img/portfolio-1.png">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</li>
<li>
<img src="http://ashleye.co.uk/img/portfolio-1.png">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed leo ligula, placerat at interdum vitae, maximus id leo.</p>
</li>
<li>
<img src="http://ashleye.co.uk/img/portfolio-1.png">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed leo ligula, placerat at interdum vitae, maximus id leo. Donec pellentesque, leo sed aliquet vulputate, orci dui commodo tellus, et tempus nunc nulla quis diam.</p>
</li>
<li>
<img src="http://ashleye.co.uk/img/portfolio-1.png">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed leo ligula, placerat at interdum vitae, maximus id leo. Donec pellentesque, leo sed aliquet vulputate, orci dui commodo tellus, et tempus nunc nulla quis diam. Vivamus diam neque, pellentesque
at euismod et, tincidunt vitae eros.</p>
</li>
<li>
<img src="http://ashleye.co.uk/img/portfolio-1.png">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed leo ligula, placerat at interdum vitae, maximus id leo. Donec pellentesque, leo sed aliquet vulputate, orci dui commodo tellus, et tempus nunc nulla quis diam. Vivamus diam neque, pellentesque
at euismod et, tincidunt vitae eros. Vivamus mi justo, volutpat ut nisl sed, dictum pellentesque odio.</p>
</li>
<li>
<img src="http://ashleye.co.uk/img/portfolio-1.png">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed leo ligula, placerat at interdum vitae, maximus id leo. Donec pellentesque, leo sed aliquet vulputate, orci dui commodo tellus, et tempus nunc nulla quis diam. Vivamus diam neque, pellentesque
at euismod et, tincidunt vitae eros. Vivamus mi justo, volutpat ut nisl sed, dictum pellentesque odio. Nunc metus quam, rutrum sed metus convallis, egestas sodales quam.</p>
</li>
</ul>
</div>

Use float: left; instead of display: inline-block;, and should look fine. Also if you want to completely remove the spaces between them set margin: 0;, everything on #content-wrapper ul li:
body{
margin: 0;
padding: 0;
}
#content-wrapper {
background-color: #EBEBEB;
margin: 0 auto;
width: 100%;
display: inline-block;
}
#content-wrapper ul {
list-style-type: none;
margin: 0 auto;
width: 100%;
padding: 0;
text-align: center;
}
#content-wrapper ul li {
background-color: whitesmoke;
color: #1B1B1B;
text-align: center;
float: left;
width: 50%;
}
#content-wrapper ul li p {
padding: 10px;
height: 150px;
}
#content-wrapper ul li img {
width: 100%;
}
#inner-wrapper{
max-width: 1000px;
width: 100%;
margin: 0 auto;
border-top: 2.5px solid #0F0F0F;
}
<div id="content-wrapper">
<div id='inner-wrapper'>
<ul>
<li>
<img src="http://ashleye.co.uk/img/portfolio-1.png">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</li>
<li>
<img src="http://ashleye.co.uk/img/portfolio-1.png">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed leo ligula, placerat at interdum vitae, maximus id leo.</p>
</li>
<li>
<img src="http://ashleye.co.uk/img/portfolio-1.png">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed leo ligula, placerat at interdum vitae, maximus id leo. Donec pellentesque, leo sed aliquet vulputate, orci dui commodo tellus, et tempus nunc nulla quis diam.</p>
</li>
<li>
<img src="http://ashleye.co.uk/img/portfolio-1.png">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed leo ligula, placerat at interdum vitae, maximus id leo. Donec pellentesque, leo sed aliquet vulputate, orci dui commodo tellus, et tempus nunc nulla quis diam. Vivamus diam neque, pellentesque
at euismod et, tincidunt vitae eros.</p>
</li>
<li>
<img src="http://ashleye.co.uk/img/portfolio-1.png">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed leo ligula, placerat at interdum vitae, maximus id leo. Donec pellentesque, leo sed aliquet vulputate, orci dui commodo tellus, et tempus nunc nulla quis diam. Vivamus diam neque, pellentesque
at euismod et, tincidunt vitae eros. Vivamus mi justo, volutpat ut nisl sed, dictum pellentesque odio.</p>
</li>
<li>
<img src="http://ashleye.co.uk/img/portfolio-1.png">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed leo ligula, placerat at interdum vitae, maximus id leo. Donec pellentesque, leo sed aliquet vulputate, orci dui commodo tellus, et tempus nunc nulla quis diam. Vivamus diam neque, pellentesque
at euismod et, tincidunt vitae eros. Vivamus mi justo, volutpat ut nisl sed, dictum pellentesque odio. Nunc metus quam, rutrum sed metus convallis, egestas sodales quam.</p>
</li>
</ul>
</div>
</div>

I suggest you should use flexbox in place of display-inline something like below :
Add display: flex to parent container
#content-wrapper ul {
list-style-type: none;
margin: 0 auto;
width: 100%;
padding: 0;
text-align: center;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: space-around;
}
#content-wrapper {
background-color: #EBEBEB;
margin: 0 auto;
width: 100%;
border-top: 2.5px solid #0F0F0F;
}
#content-wrapper ul {
list-style-type: none;
margin: 0 auto;
width: 100%;
padding: 0;
text-align: center;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: space-around;
}
#content-wrapper ul li {
background-color: whitesmoke;
color: #1B1B1B;
text-align: center;
margin: 5px 2px;
width: 45%;
}
#content-wrapper ul li p {
padding: 10px;
height: 150px;
}
#content-wrapper ul li img {
width: 100%;
}
<div id="content-wrapper">
<ul>
<li>
<img src="http://ashleye.co.uk/img/portfolio-1.png">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</li>
<li>
<img src="http://ashleye.co.uk/img/portfolio-1.png">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed leo ligula, placerat at interdum vitae, maximus id leo.</p>
</li>
<li>
<img src="http://ashleye.co.uk/img/portfolio-1.png">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed leo ligula, placerat at interdum vitae, maximus id leo. Donec pellentesque, leo sed aliquet vulputate, orci dui commodo tellus, et tempus nunc nulla quis diam.</p>
</li>
<li>
<img src="http://ashleye.co.uk/img/portfolio-1.png">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed leo ligula, placerat at interdum vitae, maximus id leo. Donec pellentesque, leo sed aliquet vulputate, orci dui commodo tellus, et tempus nunc nulla quis diam. Vivamus diam neque, pellentesque
at euismod et, tincidunt vitae eros.</p>
</li>
<li>
<img src="http://ashleye.co.uk/img/portfolio-1.png">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed leo ligula, placerat at interdum vitae, maximus id leo. Donec pellentesque, leo sed aliquet vulputate, orci dui commodo tellus, et tempus nunc nulla quis diam. Vivamus diam neque, pellentesque
at euismod et, tincidunt vitae eros. Vivamus mi justo, volutpat ut nisl sed, dictum pellentesque odio.</p>
</li>
<li>
<img src="http://ashleye.co.uk/img/portfolio-1.png">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed leo ligula, placerat at interdum vitae, maximus id leo. Donec pellentesque, leo sed aliquet vulputate, orci dui commodo tellus, et tempus nunc nulla quis diam. Vivamus diam neque, pellentesque
at euismod et, tincidunt vitae eros. Vivamus mi justo, volutpat ut nisl sed, dictum pellentesque odio. Nunc metus quam, rutrum sed metus convallis, egestas sodales quam.</p>
</li>
</ul>
</div>
For documentation - A Complete Guide to Flexbox