charlykingdev

Unfortunately this is a common problem with aligning items using float in CSS. Each door is in a div called cabinet-panels. I would wrap these all inside one div and make use of flex-box instead. For example:

<div class="cabinet-wrapper">
    <div class="cabinet-panels">Your content</div>
    <div class="cabinet-panels">Your content</div>
    <div class="cabinet-panels">Your content</div>
</div>

Then in your CSS, remove the float property completely.

.cabinet-panels {
    float: left;
}

Then add this code instead:

.cabinet-wrapper {
    display: flex;
    flex-wrap: wrap;
}

// If you wish to have a specific width on your cabinet panels you can add this in too

.cabinet-panels {
    width: 25%;
}

You can create page jumps with just a little bit of code…

Firstly, find the section of content you wish to jump to and give this an ID. Ideally, you want to wrap the content in a div like this:

<div id="jump">Your content here</div>

Notice how we have given the div an ID of “jump”… Then add a link to where you want the content to jump from like this:

<a href="#jump">Your link description here</a>

So the link with the ID “jump” will jump to the content you have wrapped in a “jump” ID. You can use this markup as much as you want, just ensure you use a different ID for each one as the ID should be unique and only used once per page.