title: Spacing and padding / margin in bootstrap row
body: <p><a href="https://i.stack.imgur.com/7ZJWy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7ZJWy.png" alt="This is how I want the container to appear"></a></p>
  
  <p>I am having difficulties with understanding padding, margin and gutter. </p>
  
  <p>Can anyone help me with getting the styling right for this design? I am not getting any space between and around the columns.</p>
  
  <p>My current coding is:</p>
  
  <pre><code>&lt;div class = "container"&gt;
      &lt;div class = "row"&gt;
          &lt;div class = "col-md-12"&gt;
              &lt;h3&gt;Heading&lt;/h3&gt;
          &lt;/div&gt;
          &lt;div class = "col-md-12"&gt;
              &lt;div class = "row"&gt;
                  &lt;div class = "col-md-8" style = "border: solid 1px #003c70;"&gt;
                      Some text
                  &lt;/div&gt;
                  &lt;div class = "col-md-4" style = "border: solid 1px #003c70;"&gt;
                      Some text
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>