Flexbox Contents is Shifting on Safari Browser - html

Question

I've tried using AutoPrefixer in case it was anything related to webkits with Flexbox, but it didn't make any difference.
Here's my CSS:
#title {
text-align: center;
font: 50px/1.3 "Oleo Script", Helvetica, sans-serif;
color: #2b2b2b;
text-shadow: 2.3px 2px 0px rgb(255, 255, 255, 0.8);
color: rgba(250, 57, 57, 0.932);
}
.container-1 {
margin: auto;
display: flex;
border-style: solid;
border-radius: 8%;
background-color: rgba(250, 57, 57, 0.932);
width: 475px;
height: 500px;
align-items: flex-end;
flex-wrap: wrap;
}
.container-1 div {
padding: 11px;
}
.session {
flex: 2;
order: 2; /*Remember when using order, all elements START at order: 0; */
font: 1rem "Oleo Script", Helvetica, sans-serif;
}
#sessionTimer {
font-size: 1.10em;
font-weight: bolder;
}
.minusSession {
flex: 1;
order: 1;
}
#minusSessionButton {
width: 2rem;
height: 2rem;
font-size: 1rem;
outline: none;
color: white;
background-color: rgb(216, 211, 211);
margin-left: 1rem;
}
.plusSession {
flex: 1;
order: 3;
margin-left: -1rem;
}
#plusSessionButton {
width: 2rem;
height: 2rem;
font-size: 1rem;
outline: none;
color: white;
background-color: rgb(216, 211, 211);
margin-left: 1rem;
}
.break {
flex: 2;
order: 5;
font: 1rem "Oleo Script", Helvetica, sans-serif;
}
#breakTimer {
font-size: 1.10em;
font-weight: bolder;
}
.minusBreak {
flex: 1;
order: 4;
margin-left: 3rem;
}
#minusBreakButton {
width: 2rem;
height: 2rem;
font-size: 1rem;
outline: none;
color: white;
background-color: rgb(216, 211, 211);
}
.plusBreak {
flex: 1;
order: 6;
}
#plusBreakButton {
width: 2rem;
height: 2rem;
font-size: 1rem;
outline: none;
color: white;
background-color: rgb(216, 211, 211);
margin-left: 0.1rem;
margin-right: 1rem;
}
.pause {
flex: 1;
order: 8;
}
#pauseButton {
width: 80px;
height: 60px;
background-color: rgb(134, 231, 89);
color: white;
outline: none;
font: 400 20px "Oleo Script", Helvetica, sans-serif;
margin-left: 22px;
}
.timer {
flex: 2;
order: 9; /* 8 */
text-align: center;
font: 400 30px "Oleo Script", Helvetica, sans-serif;
}
h1 {
margin-top: 5px;
margin-bottom: 5px;
}
.stop {
flex: 1;
order: 10; /* 9 */
}
#stopButton {
width: 80px;
height: 60px;
font: 400 18px "Oleo Script", Helvetica, sans-serif;
background-color: rgb(134, 231, 89);
color: white;
outline: none;
}
.start {
flex: 4;
order: 11; /*10 */
text-align: center;
}
#startButton {
text-align: center;
background-color: rgb(134, 231, 89);
color: white;
width: 250px;
height: 55px;
font: 32px "Oleo Script", Helvetica, sans-serif;
font-style: italic;
outline: none;
}
.sessionTitle {
flex: 1;
order: 7;
flex-basis: 100%;
text-align: center;
font: 400 30px "Oleo Script", Helvetica, sans-serif;
}
.breakTitle {
flex: 1;
order: 7;
flex-basis: 100%;
text-align: center;
font: 400 30px "Oleo Script", Helvetica, sans-serif;
}
button {
transition: filter 100ms ease-in-out;
}
button:hover {
cursor: pointer;
filter: brightness(0.9);
}
body {
background: rgb(180, 227, 145); /* Old browsers */
background: -moz-linear-gradient(
top,
rgba(180, 227, 145, 1) 0%,
rgba(97, 196, 25, 1) 50%,
rgba(180, 227, 145, 1) 100%
); /* FF3.6-15 */
background: -webkit-linear-gradient(
top,
rgba(180, 227, 145, 1) 0%,
rgba(97, 196, 25, 1) 50%,
rgba(180, 227, 145, 1) 100%
); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(
to bottom,
rgba(180, 227, 145, 1) 0%,
rgba(97, 196, 25, 1) 50%,
rgba(180, 227, 145, 1) 100%
); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4e391', endColorstr='#b4e391',GradientType=0 ); /* IE6-9 */
color: white;
}
Here's the project of what it should look like on Chrome/Firefox:
https://kfollen93.github.io/Pomodoro-Timer/
However, if you open it in Safari, you will notice the Break " + " symbol has been bumped down a row, which results in the following rows being pushed down one as well.

Answer 1

I increased the width and height by 20px and it works now.