How do I align text next to this image? Nothing is working

[niadaniels40]

I want it to look like this, the orange is supposed to substitute be her face.

This is my codepen.

I’ve tried 4 different methods and nothing absolutely nothing is getting that text to the right, float:right; barely did it. This would help clear up some confusion so I can move on. Help is very appreciated.

[PaulOB]

Hi,

To align the image next to the text you would need to put all the text in a div and then use flexbox to align them.

e.g.

 <div class="peach_bg">
    <img class="image1" src="https://5.imimg.com/data5/VN/YP/MY-33296037/orange-600x600-500x500.jpg"
      alt="face of preservex">
    <div class="description">
      <h2>The timeless beauty of natural formaldehyde.</h2>
      <h2>Do you ever look in the mirror and wish you could stay young forever?</h2>
      <h2>With PreserveX, you can.</h2>
    </div>
  </div><!-- PEACH BG CLOSE-->

I added a div called .description so that the image and the div are now siblings of the parent so that flex can be used.here.

.peach_bg {
 /* flex-basis: 40%;*/
  display:flex;
  max-width:980px;
  margin:auto;
  align-items:center;
}
.description{padding:10px;}

Note that your #container with a margin left and right of 335px is not a viable construct and instead you should centre the element using max-width and auto margins (as I have done above so adjust to suit).

Also the use of multiple H2s next to each other is semantically incorrect. H2s are for second level headings and they can’t semantically all be headings without content referring to the heading. Maybe the first one is an h2 and then the rest of the texts are p elements. CSS can style it to suit.

However you can’t jump straight to an h2 if your page has no h1! You need to follow heading as logically to make semantic sense. Something in your main header should probably be the h1 but its hard to tell with the code presented so far. Html needs to be semantic to make sense to screen readers and search engines so make sure the structure is right at the start

[niadaniels40]

Thank you Paul! I can’t believe a lot of tutorials don’t even mention any of that. Valuable information, youre the best