Logo won't line out fully to the right on cell phone

Hi, I have looked at the CSS to move the logo to the left.

On my site, medi-paper.com, I have a floating ~20px wide image on the left for which I want to make sure all posts have sufficient margin.

I have used the following CSS to achieve a margin on all posts/pages:
@media only screen and (max-width: 767px) {
.responsive .container {
max-width: 90% !important;
}
}

Also, I want the logo to be lined out fully to the right (any device).
#top #header .container {
width: 100%;
max-width: 100%;
}

But I had to adjust the top bar icons and menu as well as the left menu to prevent they are lined-out fully to the left or right
#top #header #header_main .container.av-logo-container {
padding-left:20px;
}
.social_bookmarks {
padding-left: 20px !important;
}
.av_secondary_right {
padding-right: 20px !Important;
}

On mobile, the hamburger menu is placed right of the logo, and I. moved it to the left
#top #header .container {
width: 100%;
max-width: 100%;
}

However, I keep having this ‘white’ gap on the right side of the logo. I have tried to resolve using the below CSS but to no avail. Is there a way this can be solved?

@media only screen and (max-width: 767px){
.responsive #top .logo{
float: right !important;
}
}

@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px) {
.responsive #top .logo a img{
float: right !important;
}
}

@media only screen and (max-width: 767px) {
.responsive #top #wrap_all .main_menu {
left: 0;
right: auto;
}

Thanks