If you want the element to be in the same absolute location on all screens, you can’t use percentages for positioning. Try using pixels instead, and if possible, add a position:relative CSS rule to your “wrapper” element. You may also need to use media queries to adjust the positioning for different screen widths.

You also don’t need the float:right rules in your CSS because floats are disabled by your use of position:absolute.

Where do you want the search form to appear?
If you want it to be within the black top-bar, then you should probably put the whole form within section id="top-bar"

And I suggest you try to take away position:absolute

Edit the searchform.php (or copy it to your theme and edit it. And put the link before the closing div,
if you do this;
<a href="https://hubbubooks.com/advanced" class="advanced"> Разширено търсене</a>

<style>
.advanced { display: block;}
</style>

it will appear underneath the search field and occupy the same width as that element.

<div class="search-form">
<form role="search" action="https://hubbubooks.com/" method="get">
<input type="text" name="s" placeholder="Търси">
</form>
<span class="search-icon"><i class="fa fa-search"></i></span>
<a class="advanced" href="/advanced">Advanced Search </a>
<style> .advanced {display:block;color: #fff;margin:5px 0 0 20px;font-size: 
14px;}</style>
</div>

No, you need to insert the link within the .search-form div

If you use Developer Tools in your browser you can see what’s going on and edit the HTML / CSS directly until it’s right.

@tobifjellner thank you i will remove the unnecessary things like !imporant; in the custom css, thank you for the advise.

Best Regards,
Georgi Tanchev!