Issue: Centering the logo

I cannot center the logo on the top of the site. I have tried few css codes but nothing works.

As I see the logo’s css class is #header .logo. The site link is below.

Link to the site

Note: the logo is the image with trees in it.

Thanks

FINAL UPDATE: I hope this helps to those who are new to html / css world just like me without hassling through so many useless information out there. You may think about the tags, such as; nav, div, etc. as frames of photographs. When you want your photograph (I mean logo here) to be shown in that frame, you just put its html code inside it. Just compare my final html code below with the ones i shared on my other post and you will understannd what i meant. The top center area of of my page belonged to nav tag (or frame as i call it) and in order to place my logo in it i had to place my logo (which is done using img tag) inside the nav tag. Then you can use margin-right:auto and margin-left:auto css bits to center your logo.

<header id="header" class="alt">
        <nav>
            <img src="{{ .Site.Params.baseURL }}/img/{{ .Site.Params.Navigation.logo }}" class="logo" alt="" />
            <a href="#menu">{{ .Site.Params.Navigation.menu }}</a>
        </nav>
    </header>

It looks like you need to change your HTML. Currently your logo’s markup is this:

<header id="header" class="alt">
  <a href="https://ozanweb.github.io/" class="logo" style="text-align: center;">
    <img src="/img/logo.png" alt="" style="/* margin: 0 auto; */">
    <strong>B.E.S.T.</strong>
    <span></span>
  </a>
  <nav>
      <a href="#menu">MENU</a>
  </nav>
 </header>

Your image is inside your anchor tag. So you can center your image only inside the anchor tag. The strong-Tag is also inside the anchor tag. The span-Tag has no meaning (?) and is also inside the anchor tag. The nav-Element is next to the anchor tag.

Tipp: Take a look at e. g. Zurb Foundation how they code the header: https://foundation.zurb.com/sites/docs/menu.html. That will give you an idea what’s best practice.

Hope this helps.

@Leo_Merkel Thanks for the answer Leo. But I am still working on it and cannot get it done. Should I remove the anchor tag place the logo image soruce codes inside a div tag? According to the link you provided, I am confused with how they manage to center the texts there. As I see, they are just pasting the attributes right into the html, but not css (?) Here is my html code from Hugo’s raw files;

  <header id="header" class="alt">
        <a href="{{ .Site.BaseURL }}" class="logo">{{ if .Site.Params.Navigation.logo }}<img src="{{ .Site.Params.baseURL }}/img/{{ .Site.Params.Navigation.logo }}" alt="" />{{ else }}
        <strong>{{ .Site.Params.Navigation.title }}</strong> <span>{{ .Site.Params.Navigation.subtitle }}</span>{{ end }}</a>
        <nav>
            <a href="#menu">{{ .Site.Params.Navigation.menu }}</a>
        </nav>
    </header> 

and CSS

		#header .logo {
			border: 0;
			display: inline-block;
			font-size: 0em;
			height: inherit;
			line-height: inherit;
			padding: 0 0em;
			vertical-align: right;
			margin-right: auto;
			margin-left: auto;
		}

I hope I did pasted the correct codes relevant to the question. Please also see the updated page.

UPDATE: Okay, It is my bad that I was messing with the wrong nav.html file. I just had to mess with the one that I duplicated so it can override the original theme’s nav.html. I will inform you about the result.

Thanks

Check this great resource: https://www.cssscript.com/categories/menu-navigation/

Basing myself on your link (https://ozanweb.github.io) you can center it adding this to your CSS:

#header {
text-align: center;
}

#header nav {
position: absolute;
top: 0;
right: 0;
}