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`. 

    <head>
        <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"}}
        </style>
    </head>
    <body>
        {{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?