Centering 3 divs inside 1 div with specific dimensions - html

Question

In advance, thank you all.
I'm learning. So I messed up my layout, and can't figure out to solve it.
I basically have a container who contains 3 divs (some blocks of text).
The main container should be <div id="main">. It has 1024px width and 500px height.
It should contain the 3 articles or 3 divs. They should spread horizontal.
The first "article" should be 67px from the left of the "main div".
The third "article" should also be 67px from the right of the "main div".
Between the articles there should be around 55px space, or around that value.
I read that I need to nest those articles into another div (<div class=artcontainer">) and do margin: 0 auto
I did it but not so good.
Here is the jsfiddle
<div id="main">
<div class="artcontainer">
<article class="pulllft">
<h2>Adipiscing elit</h2>
<br>
<p>Mauris malesuada dapibus ornare. Aenean molestie, lorem vitae eleifend tincidunt, ipsum nibh cursus libero, ac molestie magna sem in eros. Interdum et malesfaucibus. Integer at id nulla congue. Praesent quis dolor mattis, vitae feugiat erat commodo.Read More</p>
</article>
<article class="pulllft">
<h2>Lorem Ipsun</h2>
<br>
<p>Suspendisse id varius enim. Nulla facilisi. Pellentesque dapibus, ut luctus faucibus, erat metus tempor sem, a fringilla lacus diam a massa. Praesent porta, augue vel suscipit convallis, augue velit ultricies mauris, ut tempor massa ipsum ut magna.</p>
</article>
<article class="pulllft">
<h2>Lorem Ipsun</h2>
<br>
<p>Aliquam in mauris nulla. Cras neque mauris, congue vitae dignissim eu, euismod sit amet dolor. Etiam luctus tempor interdumEtiam in mi feugiat, rutrum nulla eget, posuere nibh. Mauris rhoncus velit nec leo luctus, ut dictum dolor laoreet. In consequat risus lectus.</p></article>
</div>
Also I'm interested if I used right properties, in a desperate attempt, I clicked what I need to and don't need. And is the use of article tag ok for this, or should I use some other tag.
The Css:
#main {
width: 1024px;
float: left;
font-family: 'Source Sans Pro', sans-serif;
font-size: 1em;
color: rgba(51,51,51,1);
z-index: 99;
height: 500px;
position: static;
/* [disabled]visibility: inherit; */
background-color: #f3f2f1;
clear: both;
overflow: hidden;
text-align: center;
}
.pulllft {
width: 274px;
text-align: justify;
line-height: 1.3em;
float: left;
color: rgba(79,30,31,.8);
font-family: "Exo 2", "sans-serif;";
font-weight: 400;
font-size: 1.3em;
display: inline-block;
padding-left: 10px;
padding-right: 10px;
height: 300px;
margin-top: 100px;
}
.artcontainer {
width: 895px;
position: relative;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
background-color: rgba(0,153,102,1);
}

Answer 1

Is this what you are looking for?
What I changed:
So first off, you had the wrong width of the inner div; you wanted it to have 67px margins on each side in a 1024px width div.
1024 - 2(67) = 890
You had 895.
Secondly, you wanted 55px between the three articles, so subtract that from the width of the container:
890 - 2(55) = 780
Divide it by 3 for the 3 articles:
780 / 3 = 260
There's your width.
Then apply the padding to the right side of the articles:
.pulllft
{
padding-right: 55px;
}
And don't apply to the last child:
.pulllft:last-child
{
padding-right: 0;
}