Q: responsiveness is not happening with position relative I am mediocre in HTML/CSS. I have a dropdown where the dropdown menu isn't working for postion:absolute. so i changed it to position:relative but the problem with this is when the drop-down value length is larger the drop down menu is moving to the left side and it is moving to the right side if the drop-down value length is smaller as shown in the below picture. I want that drop-down menu to be in proper place irrespective of the dropdown value. Thanks in advance.



.dropdown-menu {

    position: relative;
    float: right;
    margin-top: 5vh;
    margin-right: -15vh;
    font-size: 1.5rem;
    font-weight: bold;
    color: #337ab7;

        li {
            padding: 6px;
            &:hover {
                background-color: rgba(0, 0, 0, 0.1);
                cursor: pointer;
            }
        }
    }
<div class="container-fluid" style="position:relative">
  <h3>
    <div *ngIf="test.questions?.length  == test.no_questions">
      <div class="dropdown-toggle" data-toggle="dropdown" style="float: right;">{{selectedCourse}}&nbsp;
      <i class="fa fa-angle-down" style="font-size: 0.7em; font-weight: 600;"></i>
    </div>
    <ul class="dropdown-menu">
      <li *ngFor="let item of user['subscribed_courses']" 
      [ngStyle]="{'display':item.acr == selectedCourse ? 'none' : 'block' }" 
      (click)="selectCourse(item.acr)">{{item.acr}}</li>
    </ul>
    </div>
    
    <b class="col-sm-12" style="width: 50%;">{{ editMode ? 'Edit' : 'Create'}} Test <i> - [in 3 STEPS]</i></b>
    </h3>
</div>    



A: I think the issue is with your CSSpart. Remove the below line from your .dropdown-menu CSS and try..
margin-right: -15vh;
