Do not want the text to be centered - html

Question

i've never programmed before or anything, but i have a college project in which i have to edit a layout.
there's a part of it in which the text is kinda in center, when it reaches the center of the page it skippes to next line.. i want it to continue normally..
https://jsfiddle.net/nqpa6jh0/#&togetherjs=vORwosTiHV
.image.feature2 {
display: block;
margin: 0 0 0em 0;
}
.image.feature2 img {
display: block;
width: 100%;
border-radius: 50%;
width: 200px;
height: 200px;
float: left
}
.image.feature3 img {
display: block;
width: 100%;
border-radius: 50%;
width: 200px;
height: 200px;
float: right;
<div class="wrapper style2">
<section class="container">
<header class="major">
<h2>Depoimentos</h2>
<span class="byline">Os viajantes recomendam.</span>
</header>
<div class="row no-collapse-1">
<section class="">
<a class="image feature2"><img src="images/pic02.jpg" alt=""></a>
<p>Nam in massa. Sed vel tellus. Curabitur sem urna, consequat vel, suscipit in, mattis placerat.</p>
</section>
</div>
</section>
</div>
here's how it's looking
that's how i wanted it to look like (photoshopped the first one):

Answer 1

Let me explain it properly to you.
From the photoshopped image, I can see what you are trying to achieve as well as the errors in your code. There are plenty of them.
Here: (redundant code)
.image.feature2 img {
display: block;
width: 100%;
border-radius: 50%;
width: 200px;
height: 200px;
float: left
}
.image.feature3 img {
display: block;
width: 100%;
border-radius: 50%;
width: 200px;
height: 200px;
float: right;
}
You are not using classes properly. Classes are meant to remove the redundant code in css. Lets consider you added a class myParentClass to the div containing the sections as well remove the class image feature2 on a element. Then the html would look like:
<div class="myParentClass row no-collapse-1">
<section class="">
<a ><img src="images/pic02.jpg" alt=""></a>
<p>Nam in massa. Sed vel tellus. Curabitur sem urna, consequat vel, suscipit in, mattis placerat.</p>
</section>
<section class="">
<a><img src="images/pic02.jpg" alt=""></a>
<p>Nam in massa. Sed vel tellus. Curabitur sem urna, consequat vel, suscipit in, mattis placerat.</p>
</section>
</div>
The above css can be replaced with:
.myClass section a img {
display: block;
width: 100%;
border-radius: 50%;
width: 200px;
height: 200px;
float: left
}
.myParentClass section:nth-child(odd) a img {
float: right;
}
And in order to make the text inside the p elements not to wrap around, you need to add white-space": nowrap. So:
.myParentClass section p {
white-space: nowrap;
}
And to have the effect of having some whitespace to the left of odd section elements, you must use padding i.e,
.myParentClass section:nth-child(odd){
padding-left: 50px;
}