Help with making a seperator (or border) in portfolio please

I’m trying to make a separator in my portfolio to copy the model of the portfolio from this link https://codepen.io/freeCodeCamp/full/YqLyXB . I also want to add a </> symbol link in the link shows next to my border to look like ------------ </>. I tried using border-bottom, but when I do this the border runs out of bounds or where I want to put it, and when I try to fix my border in bounds, which I put in a div so I use position:relative left:px, the entire div moves and messes everything up because then my text goes over my picture. I think I can make a new div to make a separator border, but Is there a better way that people use to make separators?

Here is the codepen I’m trying to make it in https://codepen.io/icewizard/pen/owzJyg . I tried it with the green border, but its out of bounds.

<p style="display:inline;border-bottom:1px dashed green"> 
       My name is Ace. I am learning how to program. 
       Eventually, I want to make games and build websites that solve real problems that I have.
    </p>

My advice is to dig in closer in flex grid before you go any further… Now I don’t know it because I use Bootstrap grid for layout but essentially you will need to check out how the layout works. Style I wrote above just fix layout a bit and get you a green dashed bottom border, for all other stuff and details go through flex grid layout in details.
Hope that helps :slight_smile:

Thanks for the help. I just solved it with a few edits to the position property.

1 Like