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

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>