Strange behavior of HTML block (SOLVED)

I’m probably missing something obvious here, but I’ve messed with this for a while and can’t figure it out. It appears to be something with the HTML card CSS, but I can’t figure it out.

Here’s the HTML code:

<h3 style="border-top: 3px navy; border-style: solid none none none; padding: 3px 0;">Fair Maps Forum – Lexington</h3>
<div style="font-family: Arial; font-size: 14px;"><b><i>Thursday, Oct. 21 @ 7:00-8:30 EDT ● VIRTUAL</i></b></div>
The League of Women Voters of Kentucky is hosting a series of forums and online webinars to share draft legislative and Congressional district maps and solicit feedback from the public. These events are free and open to the public. <a href="">Registration is required</a>.<br />
The local partner for this forum is the League of Women Voters of Lexington.<br />
<i>More info:</i>

What I wind up with is the URL for registration on its own line, and the “local partner” graf on its own line and centered.

I have no idea why a URL should wind up on its own line, and I can’t figure out why the other line is centered.

BTW, I’ve tried it as you see it, with DIVs and with Ps.


For starters, the The League... content on down isn’t in any tag of its own. You’ve put the title in an <h3> tag, the date in a <div> tag, and then the rest in nothing. HTML cards don’t inherently supply a default tag for their content. Try wrapping everything else in a <p> and probably go from there.

Thanks – was unaware that the HTML card didn’t have a default tag or CSS. (I thought it did because I’ve noticed that the font in the HTML card is different than the standard text font.) I put the rest of it in a

tag and it worked, other than some vertical spacing I don’t like. Thanks for the response.