Can't center div within parent div using margin:auto

Question

I'm trying to center the div with class "lc-buy-sm-buy-wrap" within the div with class "lc-product-buy-sm-wrap", but no matter what I try it stays a little to the left and doesn't move when the window is resized. For visualization I've set the background-color to teak in the div I want to center and blue for the parent div which resizes and works as expected.

I've also tried setting display:inline-block on the div and text-align:center on the parent div without luck.

Html:

<div class="d-md-flex">
    <section>
        <div class="d-flex align-items-center lc-product-visual-wrap">
            <nav id="thumbNavPrevious" class="lc-product-img-nav-wrap"><i class="fa fa-arrow-circle-left fa-3x lc-product-img-nav-left" aria-hidden="true" title="@_sharedLocalizer["Previous"]"></i></nav>
            <div class="container">
                <div class="lc-product-graphic-outer-wrap">
                    <div class="lc-product-graphic-wrap"></div>
                </div>
            </div>
            <nav id="thumbNavNext" class="lc-product-img-nav-wrap"><i class="fa fa-arrow-circle-right fa-3x lc-product-img-nav-right" aria-hidden="true" title="@_sharedLocalizer["Next"]"></i></nav>
        </div>
        <div class="lc-product-current-count-wrap">
            <span class="lc-product-current-count"></span>
        </div>
        <div class="lc-product-buy-sm-wrap">
            @Html.Partial("/Views/Partials/BuySmall.cshtml", new BuySmallContextModel() { Product = Model, HandleGraphic = false })
        </div>
        <div class="d-none d-md-block lc-product-thumb-wrap" >
            <div class="d-inline-flex flex-wrap">
                @{
                    int i = 1;
                }
                @foreach (GraphicItem gfx in Model.Owner.GetGraphicItems(_helper.CurrentCulture.Id))
                {
                    string clss = i == 1 ? "lc-product-thumb-img lc-product-thumb-img-active" : "lc-product-thumb-img";
                    <lc:graphic item="gfx" class="@clss" id="@Html.Raw("thumb-" + @i)" />

                    i++;
                }
            </div>
        </div>
    </section>
    <section class="d-none d-md-block lc-product-content-wrap" style="width:100%;">
        <lc:bs-card>
            <lc:bs-card-header text="@Model.LocalizedName" />
            <lc:bs-card-description text="@Model.LocalizedDescription" />
        </lc:bs-card>
    </section>
</div>

Part of BuySmall.cshtml: ...

<div class="container lc-buy-sm-body-wrap">
    <div class="container lc-buy-sm-buy-wrap">
        <div class="container lc-buy-sm-buy-price-wrap">
            <h3 class="text-primary lc-buy-sm-buy-price">
                @Model.Product.PriceRoundedUpFormated
            </h3>
        </div>
        <div class="lc-buy-sm-buy-button-wrap">
            @Html.Partial("/Views/Partials/BuyButton.cshtml", new BuyButtonContextModel() { ButtonClass = "lc-buy-sm-buy-button", NumberClass = "lc-buy-sm-buy-textbox", SubMin = Model.Product.Owner.Min, SubMax = Model.Product.Owner.Max })
        </div>
    </div>
</div>

Original less file for BuySmall.cshtml:

.lc-buy-sm-body-wrap {
    min-width: 400px;
    max-width: 100%;
    position: relative;

    .lc-buy-sm-buy-wrap {
        position: absolute;
        width: 248px;
        top: -4px;
        left: 3px;

        .lc-buy-sm-buy-price-wrap {
            position: absolute;
            left: 0px;
            bottom: 0px;
            max-width: 100%;

            .lc-buy-sm-buy-price {
                position: absolute;
                left: 0px;
                display: table;
                padding: 4px;
                padding-left: 10px;
                padding-right: 10px;
                border: 4px solid @main-background-color;
                background-color: yellow;
                font-weight: bold;
                border-radius: 6px;
                min-width: 118px;
            }
        }

        .lc-buy-sm-buy-button-wrap {
            position: absolute;
            right: 0px;
            top: 6px;
            width: 102px;
        }
    }
}

Overriden by:

.lc-product-buy-sm-wrap {
    background-color: blue;
}

.lc-buy-sm-buy-wrap {
    position: relative !important;
    background-color: teal;
    height: 52px;
    top: unset !important;
    left: unset !important;
    margin: auto;

    .lc-buy-sm-buy-price-wrap {
        top: 0px !important;
    }

    .lc-buy-sm-buy-button-wrap {
        right: 0px !important;
    }
}

Answer 1

You might wanna see this for the example of your case

position: absolute; left:50%; transform:translate(-50%, 0);

set this css to your child div and set your parent div to position: relative;

.parent{
    display: block;
    background: red;
    position: relative;
    width: 100%;
    height: 50px;
}

.child{
  display: block;
  background: yellow;
  position: absolute;
  left:50%;
  transform:translate(-50%, 0);
  width:100px;
  height:50px;
}

<div class="parent">
  <div class="child">
  </div>
</div>