Trying to center opening hours on footer underneath navigation - html

Question

I am attempting to have our opening days aligned to the left and our hours aligned to the right but sit in the center of our navigation bar. I am using squarespace. Currently I have it like this but not sufficiently close and on the mobile version it looks silly, any help would be appreciated thanks.
HTML Code Block:
<center>
<div class="contactfield">
<div class="contact">
<div class="date">Mon-Wed</div><div class="time">5PM - 11PM</div>
<div class="date">Thu</div><div class="time">12PM - 11PM</div>
<div class="date">Fri-Sat</div><div class="time">12PM - 1AM</div>
<div class="date">Sun</div><div class="time">12PM - 11PM</div>
</div></center>
<center> <span><img class=“sm_icons“ src="https://static1.squarespace.com/static/615e86638bf80f2683975e8f/t/630ff2cac2a9b76708e4df5d/1661989587824/phone.png" width= 12px ></span> 03 8591 3000
<div class="smaller">hello#trinitystkilda.com</div>
</center>
CSS:
p.smaller {
line-height: 0px;
}
p.smaller{
margin-top:-25px;
}
.navbar{
text-align:center;
.header-nav-list{
width: 100%;
max-width:800px;
margin:0 auto;
justify-content:space-evenly;
}
}
p.contact {
line-height: 0px;
}
p.contact{
margin-top:0px;
}
.contact .date{
font-size: 14px;
width:30%;
display:inline-block;
box-sizing:border-box;
text-align:left;
}
.contact .time{
font-size: 14px;
text-align:right;
padding-right:10px;
width:70%;
display:inline-block;
box-sizing:border-box;
}
p.email {
line-height: 0px;
}
p.email{
margin-top:5px;
color: white;
}
Images:
Mobile
Web

Answer 1

Just give your date & time class with some wrapper (Heres I gave wrapper with class name .date-time), and use flex to make the child center.
.contact {
display: flex;
flex-direction: column;;
}
.date-time {
display: flex;
justify-content: space-around;
}
.date, .time {
width: 50%;
text-align: center;
}
<div class="contact">
<div class="date-time">
<div class="date">Mon-Wed</div>
<div class="time">5PM - 11PM</div>
</div>
<div class="date-time">
<div class="date">Thu</div>
<div class="time">12PM - 11PM</div>
</div>
<div class="date-time">
<div class="date">Fri-Sat</div>
<div class="time">12PM - 1AM</div>
</div>
<div class="date-time">
<div class="date">Sun</div>
<div class="time">12PM - 11PM</div>
</div>
</div>