html - Two Columns layout in CSS - text and image changing order in each row -

can me , tell me what's wrong in css code? looks this:

body         {             font-family: open sans, sans-serif;             padding: 5rem 1.25rem; /* 80 20 */         }          .container         {             width: 100%;             max-width: 60rem; /* 960 */             margin: 0 auto;         }             .item             {                 width: 100%;                 overflow: hidden;                 margin-bottom: 5rem; /* 80 */             }             }             .item             {                 color: #666;             }                 .item__info,                 .item__img                 {                     width: 50%;                     float: left;                 }                 .item:nth-child( ) .item__info                 {                     float: right;                     padding-left: 1.25rem; /* 20 */                 }                 .item:nth-child( ) .item__img                 {                     padding-right: 1.25rem; /* 20 */                 }                 .item:nth-child( odd ) .item__info                 {                     padding-right: 1.25rem; /* 20 */                 }                 .item:nth-child( odd ) .item__img                 {                     padding-left: 1.25rem; /* 20 */                 }                 .item__img                 {                 }                     .item__img                     {                         width: 100%;                         height: 18.750rem; /* 300 */                     }                  .item h2                 {                     font-weight: 700;                     font-size: 1.875rem; /* 30 */                     margin-bottom: 0.625rem; /* 10 */                 }                 .item p                 {                     line-height: 1.625rem; /* 26 */                 } 

and html simple:

    <div class="container" role="main">      <article class="item">         <div class="item__info">             <h2>header1</h2>             <p>text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1</p>         </div>         <div class="item__img"><img src="http://i.imgur.com/yv59utw.jpg" height="275" width="450"/></div>     </article>     <article class="item">         <div class="item__info">             <h2>header2</h2>             <p>text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2.</p>         </div>         <div class="item__img"><img src="http://i.imgur.com/yv59utw.jpg" height="275" width="450"/></div>     </article>     <article class="item">         <div class="item__info">             <h2>header3</h2>             <p>text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3</p>         </div>         <div class="item__img"><img src="http://i.imgur.com/yv59utw.jpg" height="275" width="450"/></div>     </article>     <article class="item">         <div class="item__info">             <h2>header4</h2>             <p>text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4.</p>         </div>         <div class="item__img"><img src="http://i.imgur.com/yv59utw.jpg" height="275" width="450"/></div>     </article>    </div> 

i created jsfiddle that, it's here. effect wanted achieve looks like this. did go wrong here?

please see following. let me know if issue still there. :)

body {    font-family: open sans, sans-serif;    padding: 5rem 1.25rem;    /* 80 20 */  }  * {    box-sizing: border-box;  }  .container {    width: 100%;    max-width: 60rem;    /* 960 */    margin: 0 auto;  }  .item {    width: 100%;    overflow: hidden;    margin-bottom: 5rem;    /* 80 */  }  .item {    color: #666;  }  .item__info,  .item__img {    width: 50%;    float: left;  }  .item:nth-child(even) .item__info {    float: right;    padding-left: 1.25rem;    /* 20 */  }  .item:nth-child(even) .item__img {    padding-right: 1.25rem;    /* 20 */  }  .item:nth-child(odd) .item__info {    padding-right: 1.25rem;    /* 20 */  }  .item:nth-child(odd) .item__img {    padding-left: 1.25rem;    /* 20 */  }  .item h2 {    font-weight: 700;    font-size: 1.875rem;    /* 30 */    margin-bottom: 0.625rem;    /* 10 */  }  .item p {    line-height: 1.625rem;    /* 26 */  }  .item__img img {    width: 100%;    height: 18.750rem;    /* 300 */  }

<div class="container" role="main">    <article class="item">      <div class="item__info">        <h2>header1</h2>          <p>text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1</p>      </div>      <div class="item__img">        <img src="http://i.imgur.com/yv59utw.jpg" height="275" width="450" />      </div>    </article>    <article class="item">      <div class="item__info">        <h2>header2</h2>          <p>text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2.</p>      </div>      <div class="item__img">        <img src="http://i.imgur.com/yv59utw.jpg" height="275" width="450" />      </div>    </article>    <article class="item">      <div class="item__info">        <h2>header3</h2>          <p>text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3</p>      </div>      <div class="item__img">        <img src="http://i.imgur.com/yv59utw.jpg" height="275" width="450" />      </div>    </article>    <article class="item">      <div class="item__info">        <h2>header4</h2>          <p>text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4.</p>      </div>      <div class="item__img">        <img src="http://i.imgur.com/yv59utw.jpg" height="275" width="450" />      </div>    </article>  </div>