Text centered but not responsive - html

Question

In my Responsive website, the Headr text is not responsive compare to the page. As in my screenshot below:
Here is the relevant code I use:
html, body {
margin: 0 auto;
padding: 0;
}
.container {
max-width: auto;
margin: 0 auto;
width:100%;
}
.box {
border: 2px white dotted;
border-radius: 15px;
margin-top: 30px;
width: 380px;
padding: 10px;
left: 0;
right: 0;
margin-right:auto;
margin-left:auto;
position:absolute;
display:table-cell;
vertical-align:middle;
}
.nav-pills li a {
color: black;
border-radius: 10px;
margin: 3px;
font-size: 15px;
font-weight: 589px;
border-radius:0px;
background-color: white;
margin-top:260px;
}
.nav-pills li a:hover {
color: white;
background-color: transparent;
display:inline-block;
border: 1px white solid;
font-weight: 300;
}
.box h2 {
font: 70px/1.2 'Pacifico', Helvetica, sans-serif;
color: white;
text-shadow: 2px 2px 0px rgba(0,0,0,0.2), 4px 4px 8px rgba(0,0,0,0.2);
padding-right: 5px;
padding-left: 5px;
margin-left: 15px;
}
.box span {
margin-left: 70px;
}
.nav-pills {
display:table;
margin:0 auto;
position:relative;
}
/* centered columns styles */
.row-centered {
text-align:center;
}
.col-centered {
display:inline-block;
float:none;
/* reset the text-align */
text-align:left;
/* inline-block space fix */
margin-right:-4px;
}
<div class="header" id="header">
<div class="container">
<div class="row row-centered">
<div class="col-md-6 col-centered">
<div class="box">
<h2>Lewis <br><span>Designs</span></h2>
</div>
</div>
</div>
<div class="menu">
<div class="row row-centered">
<div class="col-md-6 col-centered">
<ul class="nav nav-pills">
<li>About</li>
<li>Consultations</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
Very new to this, been getting help with centering in a previous question.
My only problem now, is that my header box is no longer responsive when i shrink my screen. I wonder what I did wrong.

Answer 1

It looks like all you need to do is define a width on the .col-centered class, because you defined the nested .box class with postion:absolute, which would set the position in reference to the parent element. Since the parent element had no width and was centered in its own parent element, the header box was positioned with that as the left reference point and extending 380px from there. You can read more about the CSS box model and how it works here.
.col-centered {
display:inline-block;
float:none;
width:100%;
/* reset the text-align */
text-align:left;
/* inline-block space fix */
margin-right:-4px;
}
See fiddle.