<div class="support-css-shapes"></div>

<div class="wrapper clearfix">
  <div class="circle"></div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio ducimus, minus distinctio quae alias velit vel quas aliquid laboriosam, expedita reiciendis, aperiam quos! Soluta necessitatibus commodi adipisci eum optio mollitia.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At provident in commodi similique deserunt atque nostrum fuga aspernatur eos quisquam.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, sit.</p>
</div>

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.clearfix {
    *zoom: 1;
}

body {
  font-family: "Helvetica Neue", Helvetica, arial, freesans, clean, sans-serif;
  color: #66595c;
  background-color: #faf6ec;
}

/* Start the styles  */
p {
  line-height: 1.68;
}
h1 {
  margin-bottom: 0;
}
h2 {
  margin-top: 10px;
  font-weight: 400;
  line-height: 1.6;
}
.wrapper {
  padding: 30px;
  max-width: 720px;
  margin-right: auto;
  margin-left: auto;
}

/* Styles start here */
.circle {
  width: 250px;
  height: 250px;
  background-color: #40a977;
  border-radius: 50%;
  float: left;
}