LWC template button controls alignment issue

Question

I have this alignment issue with the next button I have at the bottom, I am not sure how to align inside the box. The same code works perfectly in another scenario, but it had a smaller text in the middle. Could someone point out what I am doing wrong in this html?

<template>
    <lightning-card>
        <lightning-input slot="actions" class="contactType" label="Contact Type" type="toggle"
            checked={contactTypeToggle} onchange={handleContactTypeToggleChange} message-toggle-inactive="Call"
            message-toggle-active="Chat"></lightning-input>
        <div class="slds-align_absolute-center">
            <lightning-icon icon-name="standard:case" size="large"></lightning-icon>
        </div>
        <template if:false={caseRecordIdExists}>
            <div class="slds-align_absolute-center slds-var-p-around_medium">This flow will help you create a case in
                Salesforce for this contact. Please click Next to begin.</div>
        </template>
        <template if:true={caseRecordIdExists}>
            <div class=slds-var-p-around_large>
                <lightning-formatted-rich-text value={updateCaseMessage} variant="label-hidden">
                </lightning-formatted-rich-text>
            </div>
        </template>
        <template if:true={contactTypeToggle}>
            <div align="center">
                <lightning-input class=" chatId slds-align_absolute-center slds-var-p-around_small" required
                    message-when-value-missing="Chat ID field is required" variant="label-hidden"
                    placeholder="Enter Chat ID" type="text" onchange={handleChatIdValue}></lightning-input>
            </div>
        </template>
        <div class="slds-var-m-top_small" slot="footer">
            <lightning-button class="slds-float_right" label="Next" title="Next" variant="brand"
                onclick={handleNextNavigation}>
            </lightning-button>
        </div>
    </lightning-card>
</template>

Answer 1

If you want the parent of the floated element to contain the floats, add the .slds-clearfix class to the parent.

Add the class to the footer div as shown below:

<div class="slds-clearfix slds-var-m-top_small" slot="footer">
    <lightning-button class="slds-float_right" label="Next" title="Next" variant="brand"
                onclick={handleNextNavigation}>
    </lightning-button>
</div>

Refer documentation here

Answer 2

Remove the float right and make sure that the slds-var-m-top_small is not pushing your element out of boundaries.

Additionally, consider using lightning-layout and the pull-to-boundary property to align certain elements at the edge of the container.

Another option would be to use the card's footer slot to add action buttons at the bottom of the lightning card, and use lightning-layout and layout-items to adjust the position of your buttons