Do not want the text to be centered

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):

1 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:

myParentClass

a

<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:

p

white-space": nowrap

.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,

odd

padding

.myParentClass section:nth-child(odd){
padding-left: 50px;
}


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.