As the image and the select menu are in one div the only first image is displayed properly and select menu is displayed outside why this is happening?

```
<body>
<div style="height: 1080px; width: 100%;">
    <div style="width: 290px; height: 100%; background-color: brown;">
        <img class="profileimg" src="profileimg.jpg" alt="ProfileImg">
        <select class="name_dropdown">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
        </select>
    </div>
</div>
<!--Bootstrap JS src-->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384- 
KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" 
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384- 
JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>

```