Width of a container not automatically adjusting based on content inside

I have a div inside which I have content. I gave width = auto and then gave max-width but the container is taking up a constant fixed no matter what the size of the content is:

.adjustablebox {
  background: white;
  height: 50px;
  width: auto;
  overflow: hidden;
  padding: 8px;
  max-width: 350px;
  border-radius: 5px;
  position: relative;
  top: 0;
  left: 30%;
}

.body {
  background: black;
}

<div class="body">
  <div class="adjustablebox">
    <span>Hello world</span>
  </div>
</div>

>Solution :

div is an block element. its default behaviour is covering full width so its doing that but as you have given property of max-width so its just expanding to that limit. in order to do your stuff you have to change its behaviour to

display: inline-block;