How to properly break the layout into blocks?

Question

HTML

There is such a header in the layout joxi.ru/brR8WgzuJxLn72
Designed like this

<header class="header">
                    <div class="container clearfix">
                            <div class="header-left">
                                    <a href="index.html" class="logo">афродита</a>
                            </div>
                            <div class="header-right">
                                    <div class="contacts">
                                        <a href="tel:[phone]" class="contacts__phone">8 (800) 00-392-10</a>
                                            <div class="contacts__popup clearfix">
                                                        <a href="#" class="contacts__popup-link contacts__popup-link_hover">График работы</a>
                                                        <div class="contacts__popup-block">
                                                                <p class="contacts__popup-chedule">пн-вс: 09:00-20:00</p>
                                                                <p class="contacts__popup-eat">обед: 14:00-14:30</p>
                                                        </div>
                                            </div>
                                    </div>
                            </div>
                    </div>
           </header>

Question. Why is there an element in the form of a link with a logo in the block with the header-left class. And in the header-right there is also a nested contacts block, and not two elements go at once?

Answer 1

Because the layout designer wanted it that way?))
Well, of course it was more logical:

<div class="header-left">
                                    <div class="logo">
                                    <a href="index.html" class="logo-img">афродита</a>
                                    </div>
                            </div>