I created a `header.html` located in the 

> app/design/frontend/{VENDOR}/{MODULE}/Magento_Email/email/header.html

 not within this `header.html` I added a div tag that has a class of `custom-border`. 

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <style type="text/css">
            {{var template_styles|raw}}
            {{css file="css/email.css"}}
        {{inlinecss file="css/email-inline.css"}}
        <h1 class="custom-border">Custom Border div here</h1> <!-- newly added -->
        <!-- Begin wrapper table -->

Now I also have an `email-inline.less` located in 

> app/design/frontend/{VENDOR}/{MODULE}/Magento_Email/web/css/email-inline.css

Within this file I have defined the code as shown below

    .custom-border {
	    border: 10px solid green;
    	color: red;

Now I went to the Magento Admin under `Marketing->Communication->Email Templates` and I added a new header by selecting my `Custom Header` as my Load Default Template. After I load the template it indeed show the header.html that I created. Now when I save this new header template I created in the admin then clicking the preview button the style that has a selector of `.custom-border` is not taking effect.

What am I missing? I already cleared cache, deleted generated and pub/static folder. Deploy static-content. But still the email-inline.less changes does not take effect.

Any idea guys?