Hi everyone!
.search-menu.menu-panel-results, .search-menu-container.menu-panel-results {
width: 600px;
left: 150px;
}
.floating-search-input .search-banner-inner.wrap .search-menu .search-icon {
left: 150px;
}
I wrote these codes, when I add them to the css field, it looks the way I want, but it doesn’t look like that in others.
Can you help me pls ?
Hi helpful friends.
How can I center this?
It looks different when logged in. It looks different after logging in.
I want it to always stay right in the middle and in the same position.
Thank you. 
Just guessing here but the offset looks like it is due to the login buttons width difference than the search menu button and avatar.
Yes Lilly, this is exactly the problem. Can we find a solution to this?
Is this the same problem you had in this topic
why are you showing the search bar for anon users? nevermind. I’m there now. I thought clicking the search bar would bring up the login modal but it does let me search… having a quick look.
I’m finding it all very buggy in Chrome on my Macbook. Header buttons are opening the wrong menus and trying to close the chat drawer opens the hamburger menu etc.
I don’t have an answer as to why - my guess is that there are some conflicting SCSS. You and your forum are coming along though 
- don’t get discouraged; compared to when you first started here, your site looks a lot better. CSS is tricky if you have no experience and a lot can get messy in a hurry if you are not careful. Just take your time and read some of the Documentation knowledge-base topics here. I think if you simplify and streamline some of your CSS, you’ll figure out the issues.
I’m very surprised right now 
, I don’t have such a problem either. Maybe this problem is occurring because you translated the language of the site? The main language of the site is Turkish.
I will check this on my macbook soon
I would really like to minimize the codes but it was very complicated.
I can give you admin authority. You can witness how complicated. 
@media screen and (min-width:640px){
.d-header .home-logo-wrapper-outlet,
.d-header .panel{
width:240px;
}
}
This code solved my problem btw. But looking not good.
The header content and page content are centered independently from each other, so if for example, the header has more content on the left or right the header’s center will be different.
Here are some illustrations of this, here the header’s “center” changes based on the amount of content on the right:
There’s not a simple way to ensure the center of both the header and the page content are always the same, especially considering the width of header content may change (due to translations, number of buttons, etc).
This works because the content on the left (logo) is now the same width as the content on the right (button container). You’ll need a separate bit of CSS to target .anon (logged out) because different buttons are shown on the right. Translations as you noticed, will also make buttons a different size, so that will impact alignment.
Thank you @awesomerobot thank you for explaining with screenshots. It was very understandable for me. 
@media screen and (min-width:640px){
.d-header .panel{
margin-left:-66px;
}
}
I’m trying it this way too, but it’s like the snake game in Tetris. The two are chasing each other on the screen.
Solution
/* arama search bar ortalama */
@media screen and (min-width:640px){
html:not(.anon) .d-header .panel {
margin-left: 95px;
}
}
.floating-search-input-wrapper {
margin-right: -35px;
}
/* arama search bar ortalama */
You can adjust the pixels according to your needs.