Help with Portfolio Project

Hello everyone,

I am having trouble with the “About me” section of my Portfolio. I can’t manage to keep what I’ve written separate from my profile picture…they are always “merging”. I have tried aligning the written part to the left or nesting it within a container class but none worked…I don’t know what to try anymore to fix it!

Here is the link to my CodePen:

I am having a problem with PgOne section in the HTML code…I have tried posting it here but it got all messed up, if someone could teach me that I would appreciate it a lot!

Thank you in advance!


I’ve played a bit with your code, and I’ve changed both html and css, but it’s only to give you an idea.

How works:
Firstly, it makes a slide ( your big area with the background ) and a <div> inside aligned vertically through flexbox ( ).

Secondly, this content div has two children, both <div>, the first for the text and the second for the image. Even this two div’s are put side-by-side through flexbox.

Finally, it’s all colored and styled with css :smiley:

This is the demo:

And this is the important code


<div class="slide" style="background-image: url('')">
    <div class="content">
       <p>I'm a self taught programmer. My First contact with programming was with C in College. </p>
       <p>I'm currently a Camper at FreeCodeCamp, hoping claim my Front End Development Certificate, despite of the challenges I may encounter along the way! </p>
       <img src="" />


.slide {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-size: cover;

.content {
  margin-left: 25%;
  width: 50%;
  display: flex;
  flex-direction: row;
  background-color: rgba(255,255,255,0.5);
  padding: 8px;
  border-radius: 4px;
  box-shadow: 0 0 2px 0 rgba(255,255,255,0.8);

.content p {
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  text-align: justify;
  font-size: 16px

.content img {
  border-radius: 50%;
  width: 128px;
  margin-left: 10px;

Hope this helps, bye :wink:

1 Like

Wow! This is really impressive!

There is some stuff I don’t know within .slide and .content, but I will try my best to learn it.

It is much more neat than what I was trying to do. Thank you!

If you have some question, I’ll try to explain better some parts

Good work :wink:

1 Like

Your container <div> should wrap the row <div>. It worked for me when I did this as well as remove the wells. Also, your <h3>s need to be paragraphs (<p> tags), as <h1> through <h6> are used for headers.

If you didn’t manage to fix it, let me know and I’ll try to help further. Good luck. :wink:

I did as you said, but still both text and image are not side by side…this is being extremely difficult. :sweat:

I am literally stuck!

Hey I’m actually having similar troubles, i can’t figure out how to get my image beside my text and its stopped from doing anything else.

heres my html code:

      <p> Front-End Developer and UX/UI designer, with practical experience in project management, branding strategy, and creative direction; devoted to functional programming and information architecture.</p>
  <img src='//'/> ```

``` .center{
  clear: right;
  border: solid 2px black;
  border-radius: 5px; 
  margin: 90px;
  background-color: grey;
  width: 60%;
  float: left;
  clear: both;
  position: relative;
  border-radius: 60%;
  border: dashed 1px black;
  width: 25%;
  float: right;
  } ```

any help would be appreciated guys!

Hello there!

Would you mind posting the link to your codepen so I can check it out and try to help you?

You can send me an inbox message if you want to.


hey thanks! here the link:

if you could give me any pointers in the right direction I’d really appreciate it.

here is how I did it:

I am not sure if it is that you needed but I hope it helps you somehow or give you new ideas to solve your problem…I think that if you want to put your description in a new box, but still side by side with your image, you would have to create a new div (or box) only for that and put your personal description inside it…

I am pretty new to this, but I hope it helps you…I’ve done my portfolio already (it still is pretty ugly though) and I had a tough time doing it lol…

best of luck!

1 Like

thanks a ton! definitely did help