How to make adaptive "Contacts"?

How to align and remove hyphenation?
image

Hello,

I see that this issue happens on smaller screens, below 360px, so you can use css code below inside of a media query and result will look like this https://www.screencast.com/t/SmJZtQxsYMy :

@media screen and (max-width: 414px) {
    .header-contact .container {
        padding: 0;
    }

    .header-contact span:first-of-type {
        display: block;
        margin: 0;
    }

    .header-contact span {
        margin-right: 7px;
    }
}

Best Regards!