Może dlatego, że :
Właściwość float określa, czy element powinien unosić się w lewo, w prawo, czy wcale. Elementy pozycjonowane bezwzględnie ignorują właściwość float.
https://forum.pasja-informatyki.pl/571011/float-elementy-obok-siebie
Poczytaj tutaj dokładniej, w efekcie element o którym mówisz, jeśli nie ma właściwości float zostaje przykryty wyżej wymienionym
zobacz to dodając do swojego elementu "pierwszego" display:none, w tej sytuacji element Piano znajduje się całkowicie pod nim.
nav.desktop {
float: left;
width: 300px;
background-color: rgb(136, 130, 130);
display:none;
}
więc jest przez niego przykryty, kiedy dodajesz temu blokowi również float left, pojawia się on obok, a nie jest "OPŁYNIĘTY" przez blok desktop.
Dodaj do elementu Piano właściwość np. display: inline-block
header {
display: inline-block; // dodanie tego bez float.
width: calc(100% - 300px);
background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/f/f1/Piano_Keyboard.jpg/800px-Piano_Keyboard.jpg?20131026055017);
background-size: cover;
}
załatwi sprawę. Albo nie dodawaj właściwości display-block, a wykorzystaj właściwość FLEX i dodaj do rodzica
header {
height: 360px;
display:flex; // wykorzystaj flex system
}
i również bez float zadziała. https://css-tricks.com/snippets/css/a-guide-to-flexbox/