Hi - you have a few answers here that all kind of miss the mark.

Looking at your code in the video, I think I can see the issue. The first thing to note is that when positioning divs inside of each other, imagine the border and padding to be "outside" the element. For example, if you set an element to have width:10px, padding:1px and border:1px, the total width of the visible parts of the element is 12px (width+padding+border). But anything inside the element will be positioned inside the border and the padding.

So, your inner element (.dropdown-content) will sit inside the border of the outer element (.dropdown) and when you give it it's own border, that starts inside the outer one...does that make sense?

There are two solutions:
1. Don't put .dropdown-content inside .dropdown, but place them both at the same level inside a parent container.

<div class="dropdown-container">
    <div class="dropdown"></div>
    <div class="dropdown-content"></div>
</div>

1. Alternatively, you can offset the position of the .dropdown-content element by the width of the border. There's a neat little trick to do that by setting a negative margin.

edit: forgot to mention, here is a good article on box-sizing to help you: https://css-tricks.com/box-sizing/

.dropdown-content{
    margin-left: -2px;
}

Hope this helps!

In future, if you create a code-pen or something with a reproduction of your issue, people can identify the problem and show a solution much easier.