Problem with padding or margin % when refreshing

I want to have 3 icons as hyperlinks to adress the 3 most important module for my website. Everything else i put into the service menu.

Right now i use the following code

<td class="sys_logo_wrapper">

               <div class="sys_logo_wrapper_cnt bx-def-padding-sec-leftright"><a href="https://inspireants.com/"><img style="height: 44px" src="https://inspireants.com//templates/tmpl_snowball/images/greeny2020.png"></div></td>

<td style="padding-right: 20px; font-size: 22px"><a href="https://inspireants.com/m/articles/home/"><i class="sys-icon newspaper"></i></td>

<td style="padding-right: 20px; font-size: 22px"><a href="https://inspireants.com/m/collab/home/"><i class="sys-icon users"></i></td>

<td style="padding-right: 30%; font-size: 22px"><a href="https://inspireants.com/m/instructables/home/"><i class="sys-icon tasks"></i></td>

<td style="padding-right: 30px" class="sys_search_wrapper">__main_search__</td>

               <td class="sys_menu_wrapper">__service_menu__</td>

The problem occurs when i use the 30% for the third icon (link) 

When i refresh the page with only  F5 or when i enter the site newly. Then the icons are shown as in image B.

When i press ALT + F5 then the icons are shown as in image A, which is what i want.

But why this strange behaviour? Has anyone an idea? Why does this one % usage, cause this trouble`?

I suppose the best way would be to create some css and use different setups for PC and mobile.

What could  i do to have the 2. icon in the middle of the screen (every device) and icon 1 on the left and icon 3 on the right?

Maybe the code in general.css

width=100%

has something to do with it. It pushes the the other UI elements to the right side of the possible width.

Hello mrtn!

You may check this behavior in other browsers. Be sure that cleared all caches via  Admin panel->Tools->Cache area.

In Firefox the icons are always pushed to the right side. In chrome only when clicked F5. When using ALT + F5 they are shown in the middle, but at the right side when clicking any other icon or link.

I had swapped position of Logo and search. And then i added the icons (links) between Logo and search.

I suppose that the sys logo wrapper and the width:100 % is responsible for that.

Is it correct that this value is in the database? Or where can i change or delete this width?

OR?

I suppose that i can make a change in the sub_header.html file to create a different table.

I have now a solution. I changed the TABLE and deleted some CLASSES.

Is there any reason classes should not be deleted?

For the TABLE i use

<table style="margin-left: auto; margin-right: auto;width:100%">

               <tr>

               <td style="padding-top: 4px; height: 36px;"><a href="https://inspireants.com/"><img src="https://inspireants.com/templates/tmpl_snowball/images/logo_inspireants.png" width="36" /></td>

<td style="font-size: 26px;text-align: center; width: 16%;"><a href="https://inspireants.com/m/articles/home/"><i class="sys-icon newspaper"></i></td>

<td style="font-size: 26px;text-align: center; width: 16%;"><a href="https://inspireants.com/m/collab/home/"><i class="sys-icon users"></i></td>

<td style="font-size: 26px;text-align: center; width: 16%;"><a href="https://inspireants.com/m/instructables/home/"><i class="sys-icon tasks"></i></td>

<td class="sys_search_wrapper" style="text-align: right; width: 16%;">__main_search__</td>

               <td style="text-align: right; width: 16%;">__service_menu__</td>

   </tr>

   </table>

Hello mrtn!

It may be corrected in the templates\tmpl_evo\css\general.css file. Don't forget to clear caches after changes in the admin panel->tools->cache page.