Margins on Announcement Bar Text when Icons are Active

I cannot for the life of me figure out how to get past the container and stretch my text out more on Desktop.. When I have social media icons active the text margins are shrunk down.. I would like to bring the text out past the green boxes in this photo.. Just desk top.. So far I have this for code:

}

.announcement-bar__message { text-align: center; font-size: 18px !important; word-spacing: 2px; .announcement-bar__message { text-align: center; font-size: 18px !important; word-spacing: 2px; } p.announcement-bar__message.h5 { display: flex; align-items: center; } @media screen and (max-width: 767px){ .announcement-bar__message { text-align: center; font-size: 14px !important; } }

Sure if you have a solution please post it here! thanks!