Hello, i am new to this forum, therefore i want to introduce myself. My Name is Thomas, i come from austria and i want to bild a site for my daugther - she is a young austrian ski racer girl. Sorry for my poor English.

After i have made a site for our skiclub in Joomla, i want to make the site for my dauther in WordPress. I tried many WordPress Themes and i always come back to the excellent Theme Montezuma. I like it, but i am a newbie to work with CSS. I want to learn, therefore i am studing the site CSS-4-You an read the most thread's of the montezuma-forum.

First i wrote some blog's, then i build a simple menustructure an now i want to design the site.

I made changes to the header.php:

<div id="banner-bg" class="cf">
<div id="banner" class="row">
<div id="logo-area" class="col2">
<<?php bfa_if_front_else( 'h1', 'h3' ); ?> id="sitetitle">
<a href="<?php echo home_url(); ?>"><?php bloginfo( 'name' ); ?></a>
</<?php bfa_if_front_else( 'h1', 'h3' ); ?>>
<p id="tagline"><?php bloginfo( 'description' ); ?></p>
</div>
<div id="logo-img" class="col4">
<a href="<?php echo home_url(); ?>">
<img src="http://www.liensberger.at/wpress/katharina/wp-content/mediathek/2013/08/header-image.png">
</a>
</div>
<?php wp_nav_menu( array(
'container' => 'nav',
'container_class' => 'menu-wrapper col6',
'container_id' => 'menu1-wrapper',
'menu_id' => 'menu1',
'menu_class' => 'cf menu',
'theme_location' => 'menu1',
'fallback_cb' => 'bfa_page_menu'
) ); ?>
</div>
</div>

and to the layout.css:

/* eigener Code */
#logo-img {
position: relative;
margin-left: 30px;
margin-top: 10px;
z-index: 2000;
}

@media only screen and (max-width: 959px) {
#banner > div, #banner > nav {
float: none;
width: 100%;
}
/* eigener Code */
#logo-area {
margin-left: 0px;
}
#logo-img {
margin: 0px;
margin-bottom: 10px;
}
}

so the header look's fine for me on a normal PC-Screen. But when i change to a resolution smaller 959px (iPad) then i want the headertext, the image and the menu centered. With the image i have problems. It is always on the left site. I have tried many but without success.

The link to my site is: My Site

Thanks for a straight tip for my problem.

Greetings from Austria

In your layout.css media query section, add this CSS rule:

@media only screen and (max-width: 959px) {
   /* Your existing CSS rules */

  #logo-img img {
    margin: auto;
  }
}

Great Thank's - this was the solution.

Greetings from Austria