Question

my two identically wide divs are not displaying next to each other. I have triad few CSS approaches, but it did not work. Can some one tell me where im going wrong writh this one?

My HTML is:

 <article class="left">
                    <header>
                       <h2 class="headline">A little bit about me</h2>
                    </header>
                            <p class="custom_font">After working for more than 10 years at a numerous five star hotels and restaurants 
                               around the world as a pastry chef, I decided to start my own litte business to give the 
                               chance for every one to taste my favourite recipes from all those years.</p>
            </article>
             <article class="right">
                    <header>
                         <h2 class="headline">Article title</h2>
                    </header>
                            <p class="custom_font">At My Treat we handmake delicious treats made from finest organic ingredients. 
                               Always fresh never frozen.</p>
            </article>

And my CSS:

.left {
float: right;
width: 50%;
margin: 0 auto;
}

.right {
float: left;
width: 50%;
margin: 0 auto;
}

Cheers

Answer 1

remove the margin: 0 auto;

With margin: 0 auto you are centering the divs