How to center the logo Description in Protostar Joomla 3.4

Question

The phrase description under the logo. I want to center that. For now I had to put a line under for spacing. If I go to the template settings (Template manager -> Styles -> Protostar -> Advanced), centering it in Joomla admin is not an option.

It looks like this:

My Logo is Here
The phrase

needs to be

My Logo is Here
   The phrase

so I went to I tried going to public_html/templates/protostar/index.php ...line 141 and added a space ( ) but it didn't work:

<?php if ($this->params->get('&nbsp;&nbsp;sitedescription')) : ?>
<?php echo '<div class="site-description">' . htmlspecialchars($this->params->get('&nbsp;&nbsp;sitedescription')) . '</div>'; ?>
<?php endif; ?>
</a>

---

Actually I just figured it out...
Put the style with the amount of px you need your description to go to the left. See where I added style="margin-left: 10px;"

<a class="brand pull-left" href="<?php echo $this->baseurl; ?>/">
  <?php echo $logo; ?>
  <?php if ($this->params->get('sitedescription')) : ?>
  <?php echo '<div class="site-description" style="margin-left: 10px;">' . htmlspecialchars($this->params->get('sitedescription')) . '</div>'; ?>
  <?php endif; ?>
</a>

Answer 1

The correct way to do it would be to add the following css to /templates/protostar/css/template.css (or, if you will recompile the LESS then /templates/protostar/less/template.less):

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

Answer 2

I'd suggest you to use

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

As it would allow you avoid both situations:

1. Title is bigger than description
2. Title is smaller than description

Answer 3

Which place you want to display the description using this css templates/protostar/css/template.css

.site-description 
{
    margin:0 22px !important ;
}