<div id="container" class="none">
  <h3>Choose the text box margin</h3>

  <div id="buttons">
    <button id="left">margin-left: auto</button>
    <button id="right">margin-right: auto</button>
    <button id="horizontal">margin: 0 auto</button>
    <button id="none" class="active">margin: 0</button>
  </div>

  <div id="text">

    <h2>A Fallen Leaf</h2>
    <p>
      A trusting little leaf of green,<br /> A bold audacious frost;<br /> A rendezvous, a kiss or two,<br /> And youth for ever lost.<br /> Ah, me!<br /> The bitter, bitter cost.<br />
    </p>
    <p>
      A flaunting patch of vivid red,<br /> That quivers in the sun;<br /> A windy gust, a grave of dust,<br /> The little race is run.<br /> Ah, me!<br /> Were that the only one. <br />
    </p>
    <h4>&nbsp; &mdash; &nbsp; Ella Wheeler Wilcox</h4>

  </div>
</div>

// https://flatuicolors.com/palette/in

body,
html {
  margin: 0;
  padding: 0;
  background-color: #2C3A47;
}

#container {
  width: 80%;
  margin: 1em auto;
  overflow: hidden;
  
  // for pretty
  background-color: #F8EFBA;
  color: #2C3A47;
  box-sizing: border-box;
  padding: 1em 2em;
}


#text {
  // the important part
  margin: 0;
  width: 50%;
  
  position: relative; // for margin decorations
  &:before, &:after {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    content: " ";
    text-align: center;
    padding: 2em;
    box-sizing: border-box;
    background-color: rgba(#FEA47F, 0.5);
    display: none;
  }
  &:before {
    content: "Auto margin (left)";
  }
  &:after {
    content: "Auto margin (right)";
  }
  
  &.left {
    margin-left: auto;
    margin-right: 0;
    &:before { // decoration
      left: -100%;
      display: block;
    }
  }
  &.right {
    margin-right: auto;
    &:after {
      display: block;
      left: 100%;
    }
  }
  &.horizontal {
    margin-left: auto;
    margin-right: auto;
    &:before {
      display: block;
      width: 50%;
      left: -50%;
    }
    &:after {
      display: block;
      width: 50%;
      left: 100%;
    }
  }
  
  // so it's visible
  border: 4px dashed #FEA47F;
}


h1, h2, h3, h4, h5 {
  color: #3B3B98;
}


#buttons {
  display: grid;
  grid-gap: 0.2em;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  grid-auto-rows: max-content;
  
  & button {
    color: #F8EFBA;
    background-color: #2C3A47;
    border: 0;
    padding: 0.4em 1em;
    font-size: 1em;
    cursor: pointer;
    
    &.active {
      background-color: #F97F51;
    }
    
    &:focus {
      outline: 3px solid #D6A2E8;
    }
    
    &:hover {
      opacity: 0.9;
    }
  }
}

const buttons = $('#buttons > button');
buttons.on('click', function() {
  buttons.removeClass('active');
  $(this).addClass('active');
  
  const id = $(this).attr('id');
  $('#text').removeClass().addClass(id);
});