People who start studying CSS sometimes get confused by the subtle differences between properties that apparently seem to be similar. This is the case of display: none and visibility: hidden. To properly understand these differences, we have to bear in mind some simple concepts.
First of all, these two properties work on different levels. While the former handles the actual visual rendering of elements, the latter simply adjusts their visibility. So if you use display: none, an element is not displayed at all, that is, it has no impact on the rendering of the page. On the contrary, if you use visibility: hidden, an element is simply hidden but still has an impact on the rendering, for example by occupying a certain amount of space.
Bear in mind, however, that both declarations pose some accessibility problems. In fact, most screen readers won't read aloud the content of an element if such element has one of these declarations applied on it. My advice is to use these declarations only on elements that are not important for a proper use/understanding of your documents (for example hr elements).