PAGE TITLES

This theme uses bootstrap so you have to be careful editing css classes. The title has the following classes col-sm-12 col-md-12 col-lg-4 which means that the width of the title is 100% when the header is small and and in the middle. So the css code

@media (min-width: 992px)
.site-description, .site-title  {
    text-align: center;
}
@media (min-width: 320px)
 .site-description, .site-title {
    text-align: center;
}

.site-description, .site-title  {
    text-align:center;
}

should work for screens less than 1200px but not screens great than 1200px. The reason for this is because of media queries added in by bootstrap. When the screen reaches 1200px the header is divided into 2 sections which span 12 columns. Your title has 4 columns and your menu has 8 columns.

There a couple things you can try to correct this. One is you can create a child theme and replace the col-lg-4 and col-lg-8 with col-lg-12 for both the title and the navigation in the header.

The other way would be to override the media query for the title and the navigation for col-lg-4 and col-lg-8. Since these classes might be used in other parts of your theme you want to take care to override them in only for the title and navigation .

I tried to do this in the code inspector but didn’t have much luck. Here what I tried you can play with it and see if you have better luck.

@media (min-width: 1200px){
  #masthead .col-lg-4,#masthead .col-lg-8{
   float:none;
   clear:both;
   width:100%;
   display:block;

}

}

good luck

First, thanks mrtom414 for helping out…but I think they were referring to entry titles (page titles/headings), or that is my guess.

Regarding centering the “Page Titles”, you can do this with:

.entry-title {
    text-align: center;
}