Can browser change HTML?

Question

My mark up looks like this

<div class="thumbnail">
    <a class="link-to-product" href="#">
        <div class="stickers">
            <div class="sticker discounts">Акции</div>
        </div>
        <div class="thumbnail-top">
            <div class="img-wrap"><img src="img/box2.png" alt=""></div>
            <div class="category">Жидкости</div>
            <div class="title">Масло черного тмина</div>
        </div>
        <div class="thumbnail-down">
            <div class="divider"></div>
            <div class="price-container">
                <div class="current-price">
                    <span>250 </span>
                    <span class="currency">грн.</span>
                </div>
                <div class="old-price">
                    <span>300</span>
                </div>
            </div>
            <a class="buy-button" href="#">Купить</a>
        </div>
    </a>
</div>

This is what I see in browser devtools:

.thumbnail-down falls out of .link-to-product.

I tried different browsers (chrome, firefox), cleared cache, turned of css and js. And still .thumbnail-down falls out of .link-to-product.

I wrote the mark up in pug and compiled html with gulp. When i look at compiled html in dist folder it looks alright. I actually copied sample of code out from this file. Holy cow. What can cause such weird behavior?

I checked all links before this element and after. they are all properly closed

Not only it falls out. Browser copies .link-to-product. There is no css and js on this page, just pure html. And I copied it to different folder with no gulp and no other plugins

Answer 1

Try without nesting a inside a.

What I mean is

<a class="buy-button" href="#">Купить</a> 

is inside

<a class="link-to-product" href="#">

My guess is that's what's causing the problem.