​@Jamie ShopPros it looks like when you save, the CSS styling portion of your code is being stripped out. I have not had good luck with inline styling in the HTML widgets and take the approach of separating my HTML from my CSS. Adding the HTML to the HTML widget, then the CSS in the Configure Branding and Look “Custom Styles” repository. For example for your 2x6 block I would add it like the below. Make sure when you do it this way that your Class (ex: image-grid) is unique to your custom HTML and isn’t used anywhere else in the platform so you don’t impact other styling elements. If I’m not sure I’ll just add and x to the class name, or sometimes my initials, so I know it’s unique (ex: image-gridx) but you can do whatever works for you of course . 

HTML: Widget

<section class="image-grid">
    <div class="row">
        <a href="URL_FOR_IMAGE_0" target="_blank">
            <img src="https://imgur.com/f14acVQ.jpg" alt="Image 0 Description">
        </a>
        <a href="URL_FOR_IMAGE_1" target="_blank">
            <img src="https://imgur.com/4idli9c.jpg" alt="Image 1 Description">
        </a>
        <a href="URL_FOR_IMAGE_2" target="_blank">
            <img src="https://imgur.com/eUOR0CW.jpg" alt="Image 2 Description">
        </a>
    </div>
    <div class="row">
        <a href="URL_FOR_IMAGE_3" target="_blank">
            <img src="https://imgur.com/ulGCe9c.jpg" alt="Image 3 Description">
        </a>
        <a href="URL_FOR_IMAGE_4" target="_blank">
            <img src="https://imgur.com/a11lD9e.jpg" alt="Image 4 Description">
        </a>
        <a href="URL_FOR_IMAGE_5" target="_blank">
            <img src="https://imgur.com/lmtmTHN.jpg" alt="Image 5 Description">
        </a>
    </div>
</section>

CSS: Configure Branding and Look > Custom Styles

.image-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.image-grid .row {
    display: flex;
    gap: 10px;
    justify-content: center; /* Centers the images horizontally */
}

.image-grid img {
    max-width: 150px; /* Ensures a consistent image size */
    height: auto;
    border-radius: 8px;
}

/* Make it responsive on smaller screens */
@media (max-width: 768px) {
    .image-grid .row {
        flex-direction: column;
        align-items: center; /* Aligns images in a vertical stack on small screens */
    }
}

Hi so this is happening because the HTML editor has protected classes and tags.

A bunch of your stuff will naturally fall out once you move away from those tags.

You can probably pull off your page with a two thirds and one thirds layout, but if those blocks are going to pages, LearnPro, Business Pro, etc….it should come down to applying the correct css to just that one html widget on the page. To get the rounded button look with your quick links, it would be a similar approach...target the classes defined just for that widget on the page.

As a further example:

/** Remove Enrollment Status Line from Catalog Entry on People Leaders Page **/  

#doc-page-91 div.ui-list-item-content-colophon > div.ui-list-item-content-row.ui-list-item-price-enrollment-status

{     display:none; }

this helps to limit on page 91 the css.

There is a method to identify the css for just that widget on page as well...

I may be eating crow about tageting a specific widget (I am getting an indication that we dont do that).

Take a look at this one article please...it should help more.

A Few CSS Tricks and Tips for Your Custom Widget Pages | Community