Buycraft ::before keeping from left

Question

I have a store here

*please excuse the dust. I am trying to get the logo to the left in header, but it looks like there is a div.header::before but it isn't in my css and I am assuming built in the cms somewhere. I have tried position: absolute; and also float: left; with no luck.

<div class="logo">
    {% if store.logo %}
        <a href="/"><img src="{{ store.logo }}" /></a>
    {% else %}
        <span>{{ store.name }}</span>
    {% endif %}
</div>

.container {
height: 100%;
width: 100%;
margin:0;
padding:0;
border:0;
overflow: hidden;
position: fixed;

}

.header {
    width: 100%;
    margin:0;
    padding:0;
    background-color: #333;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-bottom: 3px solid  #DAC896;
}

.logo {
    position: absolute;
    float: left;

}

Answer 1

It seems like you mixing all sort of different layout techniques together. I'm pretty sure you don't want to set the logo to position: absolute. This will position it relative to its first positioned (not static) ancestor element.

So you can get rid of it. In addition, you can also remove the float: left, since floating was invented to allow text to wrap around an image. It can be quite confusing since there was a time floating was used to create the whole layout.

But you don't need it at all, because you are using the browsers native-grid. Which is fantastic! Just be aware of the browser support: https://caniuse.com/#search=display%3A%20grid

In your case you would need to specify the single columns of the grid. You can make use of the grid-column and grid-row properties. This looks like this:

.logo, .navbar, .buttons {
    grid-row: 1;
}

.logo {
    grid-column: 1 / 3;
}

.navbar {
    grid-column: 2 / 3;
}

.buttons {
    grid-column: 3 / 3;
}

You can learn more about the native-grid here.