Having trouble aligining buttons with list bullets - HTML/CSS - html

Question

I have an unordered list and the list items are the buttons like shown in the image.
Code Link
.btn {
overflow: visible;
margin: 0;
padding: 0;
border: 0;
background: transparent;
font: inherit;
line-height: normal;
cursor: pointer;
-moz-user-select: text;
display: block;
text-decoration: none;
text-transform: uppercase;
padding: 16px 36px 22px;
background-color: #fff;
color: #666;
border: 2px solid #666;
border-radius: 6px;
margin-bottom: 16px;
transition: all 0.5s ease;
border-radius: 15px;
box-shadow: 5px 7px #999;
}
.btn:-moz-focus-inner {
padding: 0;
border: 0;
}
.btn--stripe {
overflow: hidden;
position: relative;
}
.btn--stripe:after {
content: '';
display: block;
height: 7px;
width: 100%;
background-image: repeating-linear-gradient(45deg, #666, #666 1px, transparent 2px, transparent 5px);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
border-top: 1px solid #666;
position: absolute;
left: 0;
bottom: 0;
background-size: 7px 7px;
}
.btn--stripe:hover {
background-color: #666;
color: #fff;
border-color: #000;
box-shadow: 5px 10px 18px #888888;
/*box-shadow:20px 20px 50px grey; */
}
.btn--stripe:hover:after {
background-image: repeating-linear-gradient(45deg, #fff, #fff 1px, transparent 2px, transparent 5px);
border-top: 1px solid #000;
animation: stripe-slide 12s infinite linear forwards;
}
.child-btn {
font-size: 17px;
border-radius: 40px;
}
<ul id="list">
<li><button class="btn btn--stripe child-btn" type="submit" name="tt_btn" value="BMS">BMS Room</button></li>
<li><button class="btn btn--stripe child-btn" type="submit" name="tt_btn" value="LH310">LH-310</button></li>
</ul>
The buttons are not able to align with the bullets, can anyone help me where I am going wrong?
Edit: Problem solved. The problem was in Firefox where I had to remove display: block; from my CSS. In Chrome, it works fine.

Answer 1

Here is the working snippet for both Chrome & Firefox.
fiddle to validate.
You just have to remove display:block; from the .btn{...} class.
.btn {
overflow: visible;
margin: 0;
padding: 0;
border: 0;
background: transparent;
font: inherit;
line-height: normal;
cursor: pointer;
-moz-user-select: text;
text-decoration: none;
text-transform: uppercase;
padding: 16px 36px 22px;
background-color: #fff;
color: #666;
border: 2px solid #666;
border-radius: 6px;
margin-bottom: 16px;
transition: all 0.5s ease;
border-radius: 15px;
box-shadow: 5px 7px #999;
}
.btn:-moz-focus-inner {
padding: 0;
border: 0;
}
.btn--stripe {
overflow: hidden;
position: relative;
}
.btn--stripe:after {
content: '';
display: block;
height: 7px;
width: 100%;
background-image: repeating-linear-gradient(45deg, #666, #666 1px, transparent 2px, transparent 5px);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
border-top: 1px solid #666;
position: absolute;
left: 0;
bottom: 0;
background-size: 7px 7px;
}
.btn--stripe:hover {
background-color: #666;
color: #fff;
border-color: #000;
box-shadow: 5px 10px 18px #888888;
/*box-shadow:20px 20px 50px grey; */
}
.btn--stripe:hover:after {
background-image: repeating-linear-gradient(45deg, #fff, #fff 1px, transparent 2px, transparent 5px);
border-top: 1px solid #000;
animation: stripe-slide 12s infinite linear forwards;
}
.child-btn {
font-size: 17px;
border-radius: 40px;
}
<ul id="list">
<li><button class="btn btn--stripe child-btn" type="submit" name="tt_btn" value="BMS">BMS Room</button></li>
<li><button class="btn btn--stripe child-btn" type="submit" name="tt_btn" value="LH310">LH-310</button></li>
</ul>

Answer 2

#list {
align-items: left;
display: flex;
flex-direction: column;
}
.btn {
width: 20vw;
border-radius: 20vw;
height: 15vh;
margin-top: 2vh;
}
<ul id="list">
<li><button class="btn btn--stripe child-btn" type="submit" name="tt_btn" value="BMS">BMS Room</button></li>
<li><button class="btn btn--stripe child-btn" type="submit" name="tt_btn" value="LH310">LH-310</button></li>
</ul>