CSS resizing the <div> to fit the text

You know what? We're all idiots. Here's the REAL answer:

HTML:

<div class="container">
    <br>
    <br>
    <br>
    <br>
    <span class="box">Hello my name is jack</span>
</div>

CSS:

.container {
    background-color: #ED8713;
    height: 300px;
    width: 300px;
    margin: 60px;
    margin-top: 50px;
    text-align: center;
}
.box {
    background-color: #FFFFFF;
    margin-top: 15px;
}

Let the .box be an inline-block...

.box {
  display: inline-block;
}

...and center it!

.container {
  text-align: center;
}

Adding this two snippets to your stylesheet and removing the width: 270px should suffice.