menu icons placed reversely in tablet and mobile view

Hi,

I have the following problem: I have a menu element and a social media element in a row. The menu element is on the left side and the social media element on the right side. Also I have a CSS class for the menu element with the following code:

@Media all {

/*hide the menu items in the navigation bar*/
.custom-menu .et_pb_menu__menu {
display: none !important;}

/*hamburger menu icon*/
.custom-menu .et_mobile_nav_menu {
display: block !important;
float: left;}}

In the desktop everything is fine and the hamburger menu and search icons are on the left side, like that:

In the tablet and mobile view it is shown on the right side of the element width:

Although I set it to be on the left side:


Can want it to be shown on the left side for all devices. I would appreciate any help. Thank you!