Div / Text is not centered with the field: auto

Question

I am trying to use the @media query, everything works fine except that the identifier is like the text is centered with the field: automatically when the @media query is called. I have tried a lot of things. I originally had float: left in #masterhead # header-text {}, but I changed it to display: inline-block; (I read that this is a solution for many). I tried to explicitly set the width .. and display: block;

<div id="masterhead">
    <div id="header-bg">
        <div class="container">
            <div id="header-text">
                <a href="https://www.google.com">
                    <h3>Thin Title</h3>
                    <h1>Title</h1>
                </a>
            </div>
            <div class="logo">
                <a href="https://www.google.com"><img src="~/Content/images/stacked.png" /></a>
            </div>              
        </div>
    </div>
</div>


#masterhead #header-text{
display:inline-block;
font-family: Arial, Helvetica, sans-serif;
}

#masterhead h1{
margin-top:0;   
font-weight: 600;
}

#masterhead h3{
padding-top:15px;
}


@media only screen and (max-width: 479px) {
    #masterhead #header-text { margin:auto; }
    #masterhead h1 {font-size:30px; margin:auto;}
    #masterhead h3 {font-size:20px; margin:auto;}
}

Answer 1

h1 h3 . , 100% , margin:auto; . , text-align: center; width: 100%; container/wrapping.

, :

#masterhead #header-text {
    width: 100%;
    text-align: center;
}

#masterhead #header-text{
font-family: Arial, Helvetica, sans-serif;
}

#masterhead h1{
margin-top:0;   
font-weight: 600;
}

#masterhead h3{
padding-top:15px;
}


@media only screen and (max-width: 479px) {
    #masterhead #header-text { width: 100%; text-align: center;}
    #masterhead h1 {font-size:30px; }
    #masterhead h3 {font-size:20px; }
}

<div id="masterhead">
    <div id="header-bg">
        <div class="container">
            <div id="header-text">
                <a href="https://www.google.com">
                    <h3>Thin Title</h3>
                    <h1>Title</h1>
                </a>
            </div>
            <div class="logo">
                <a href="https://www.google.com"><img src="~/Content/images/stacked.png" /></a>
            </div>              
        </div>
    </div>
</div>

Hide result

.

---

Edit:

... , , text-align: center; div , reset text-align: left; .

:

#masterhead #header-text {
  float: left;
  font-family: Arial, Helvetica, sans-serif;
}
#masterhead h1 {
  margin-top: 0;
  font-weight: 600;
}
#masterhead h3 {
  padding-top: 15px;
}
#masterhead br {
  display: none;
}

@media only screen and (max-width: 479px) {
  #masterhead #header-text {
    float: none;
    text-align: center;
  }
  #masterhead #header-text a {
    display: inline-block;
    text-align: left;
  }
  #masterhead h1 {
    font-size: 30px;
  }
  #masterhead h3 {
    font-size: 20px;
  }
}

<div id="masterhead">
  <div id="header-bg">
    <div class="container">
      <div id="header-text">
        <a href="https://www.google.com">
          <h3>Thin Title</h3>
          <h1>Title</h1>
        </a>
      </div>
      <div class="logo">
        <a href="https://www.google.com"><img src="~/Content/images/stacked.png" /></a>
      </div>
    </div>
  </div>
</div>

Hide result

, float: left;. - , , , .container div.

Answer 2

#header-text display:block display:inline-block, inline-block .

#header-text.

Fiddle

, text-align:center div.

.container {
    text-align: center;
}

Fiddle