ASP.Net View Cannot Set Margin on Element in Code Block

Question

I have tried everything I can thing of. And searching Google has not turned up anything.

<div class="col-md-12">
    <div class="card-header text-white" style="background-color:cornflowerblue">
        <div class="col">
            @if (User.Identity.IsAuthenticated && User.IsInRole("Admin"))
            {
                <a class="text-white float-right" asp-action="Edit" asp-route-id="@item.Id"><i class="bi bi-pencil-square"></i></a>
            }
        </div>

        <div class="col">
            <p class="card-text">
                <h5 class="card-title">@item.Name</h5>
            </p>
        </div>
        <p class="text-dark">@item.Price.ToString("c")</p>
    </div>
</div>
<div class="col-md-6">

Basically what I want is for the bi-pencil-square to float to the right edge of the card header. I have tried Bootstrap float right and style="Margin-Right: 0px". I have tried setting styles on the a tag, on the enclosing div, and even on the i tag. Nothing works.

Does anyone have any suggestions?

Answer 1

I figured it out. I think the problem was that I should have put the 2 div's inside a row tag.

<div class="col-md-12">
    <div class="card-header text-white" style="background-color:cornflowerblue">
        <div class="row">
            <div class="col-md-1 offset-11">
                @if (User.Identity.IsAuthenticated && User.IsInRole("Admin"))
                {
                    <a class="text-white" asp-action="Edit" asp-route-id="@item.Id"><i class="bi bi-pencil-square"></i></a>
                }
            </div>

            <div class="col card-text">                                    
                    <h5 class="card-title">@item.Name</h5>                                    
            </div>
        </div>
        
        <p class="text-dark">@item.Price.ToString("c")</p>
    </div>
</div>