Product color variants placement

[Loulouis]

My product color variants is re-arranged in a weird way. For some reason they were first all vertical on my page. I do not know why or how this has happened. They used to be horizontal. I added a few lines of css to adjust the variants to look like the screenshot now, but they are still not what the used to be. I wanted everything on one line and they have so much spacing between them you can fit a small car in there. Can someone help me out ? My website is https://loulouis.no

If someone can please help me identify where the issue is coming from or how it occured, that would be highly appriciated. They have not always been like this, they used to be perfect, but something has happened and I do not know what.

This is the css code i added to make it look like the screenshot : 

.productView-options {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.product-form__swatch {
display: flex;
flex-wrap: wrap;
margin-bottom: 10px;
}

I used flex-wrap: wrap; so they the width of the page doesnt get adjusted. If I use nowrap to get them on the same line, the mobile friendly solution gets worse. 

[BSS-TekLabs]

I see they are showing up well. Do you still have problems with them?

[Loulouis]

Yes, I still have a problem. But It might look like that for you since you probably have a larger screen. What phone do you use?