Media query works with bootstrap classes but not with my id or class

I'm a little new to this, so apologies if it's a dumb question, just can't find the answer elsewhere.

I am building a form with several groups of colspan 6 to create the effect of 2 columns. I need to raise a group to cover some empty space when a large viewport is in use. I have the following CSS which works on the form:

@media screen and (min-width: 992px) {
  .dxbs-fl-gt.col-lg-6.col-12 {
    position: relative;
    top: -105px;
  }
}

That's all well and dandy until I check out a similar form and see that one of its groups is now raised making that form look off. In order to affect just the 1st form, I tried replacing the bootstrap classes (.dxbs-fl-gt.col-lg-6.col-12) with a div class (and then an id because it's just for this one spot), but it's as if that CSS is now ignored totally. Here is my new CSS for the sake of thoroughness:

@media screen and (min-width: 992px) {
  #vendorAddressGroup {
    position: relative;
    top: -105px;
  }
}

I've tried moving my div tags to several places all of which surround the group, but no joy. Can anyone advise on what to try next?

My HTML:

                        <div id="vendorAddressGroup">
                            <DxFormLayoutTabPages ColSpanXs="12"
                                                  ColSpanLg="6"
                                                  ActiveTabIndex="@ActiveTabIndex1">
                                <DxFormLayoutTabPage Caption="Main">
                                    @switch (ActiveTabIndex1)
                                    {
                                        case 0:
                                            @*Address Group*@

                                            <DxFormLayoutGroup Caption="Address"
                                                               ColSpanXs="12"
                                                               ColSpanMd="12"
                                                               ColSpanLg="12">
                                                @*Various <DxFormLayoutItem>s*@
                                            </DxFormLayoutGroup>
                                            @*Contact Group*@
                                            <DxFormLayoutGroup Caption="Contact"
                                                               ColSpanXs="12"
                                                               ColSpanMd="12"
                                                               ColSpanLg="12">
                                                @*Various <DxFormLayoutItem>s*@
                                            </DxFormLayoutGroup>

                                            break;
                                    }
                                </DxFormLayoutTabPage>

                                <DxFormLayoutTabPage />
                                <DxFormLayoutTabPage />
                                <DxFormLayoutTabPage />
                            </DxFormLayoutTabPages>
                        </div>

Solution

As per DevEx, need to get DevEx Blazor 21.1.5, "wrap tabs in the DxFormLayoutGroup element and specify the CssClass property for this element. Then, you can use this CSS class to create a media query specific to that group." Can't update yet so can't test it, but sounds promising.