Creating horizontal breaks on a landing page

[KristiM]

To preface, I'm not really a coder and only know the bare minimums of HTML. In any case, I'm trying to add horizontal rules to a landing page template to mimic an email template design I created. I want to do the hr in HTML rather than uploading a jpeg of the design. I got the lines to be the color and length that I want, but there's a big gap of space between them that I want to get rid of as I want them to stack on top of eachother. I've tried using padding and margin to adjust it, but that's not working (I may be using them incorrectly). In any case, I'd be very thankful for any help! 

Here's a jpeg of what I'm trying to acheive

A jpeg of the look I'm trying to acheive.

Here are screenshots of my HTML code and what it looks like when I run it:

[anthonypizzurro · Accepted solution]

Hi Kristi, 

You should be able to achieve this by adjusting the margin:

<hr style="border: 3px solid #aecdd1; margin-bottom: 0; width: 450px;">
<hr style="border: 3px solid #8d7429; margin-top: 0; width: 550px;">

If this doesn't stack them directly on top of each other, there may be other styles on your website affecting these.

Best,

Anthony

[KristiM]

THANK YOU!! I swear I tried this exact thing, but I guess not. It worked perfectly! 🙂