CSS margin for Firefox - html

Question

i have written a CSS margin for spacing between checkboxes. It works fine on chrome but not on Firefox.
here is CSS
.vehicle-types {
float:left;
width:100%;
margin: 6px 0;
.check-vehicle {
float:left;
width:100%;
.checkbox-btn {
width: auto;
display: inline-block;
margin-right: 20px;
float:left;
input {
float:left;
width:0 !important;
}
label {
margin:0 !important;
float:left;
}
}
}
}
is there any Firefox browser specific CSS?
(screenshots below)
Thanks in advance.
Chrome
Firefox

Answer 1

Okay, So I was writing this answer before you pushed your edited post. I am still to go through the code but as an alternate you can try this and see if it works or not
update: You have only shared css which is still very difficult to comprehend
An ideal solution to have everything on the same line would be to do.
.parent-div {
display: flex;
flex-direction: row;
justify-content: space-between
}
.child-div {
align-items: center;
display: flex;
flex-direction: row;
}
.create-box {
height: 30px;
width: 30px;
border: 1px solid black;
}
p {
margin-left: 5px;
}
<div class="parent-div">
<div class="child-div">
<span class="create-box"> </span>
<p> checkBox 1 </p>
</div>
<div class="child-div">
<span class="create-box"> </span>
<p> checkBox 1 </p>
</div>
<div class="child-div">
<span class="create-box"> </span>
<p> checkBox 1 </p>
</div>
</div>
In the above code I have used flex
flex-direction says that wether you want your divs to be stacked in row or columns i.e consider this somewhat equivalent to bootstrap class row . (if you have used bootstrap previously)
justify-content: space-between: space-between gives equal space between each square, but not between it and the container.
Note: You could have also used space-around
Space-around puts an equal cushion of space on either side of the square — which means the space between the outermost squares and the container is half as much as the space between two squares (each square contributing a non-overlapping equal amount of margin, thus doubling the space).
align-items: center; just align everything inside a div to centre across x-y axis
I found this article very useful when learning about flexboxes (might help you as well)

Answer 2

Look, the Firefox version adds that margin to the first child as well..
To avoid that, use:
.checkbox-btn:not(:first-child) {
...
margin-right: 20px;
...
}

Answer 3

I had this kind of problem also but with IE, for the next time you can use this code
it will only show on firefox, you can edit what you want and it will only show on firefox
#-moz-document url-prefix() {
//just write the code here
}
I know its not a problem from your code but if that was the case you could go to:
https://caniuse.com/
and check if it is your code