title: css / html - spread child divs across parent div
body: <p>My issue is that I have a div (id=service-section-container) which contains 3 divs (class=service-section) which are shifted to the left of their parent div. I haven't found an efficient way to center the group of child divs using margins as using pixels would have a different result of different screens where as percentage didn't do the trick.</p>
  
  <p>It's probably a simple fix which I couldn't solve with my lack of experience, hence why I'd really appreciate your help.</p>
  
  <p>Example can be found at the link: <a href="http://jsfiddle.net/6tob3q1z/2/" rel="nofollow">http://jsfiddle.net/6tob3q1z/2/</a></p>
  
  <p>Note: You might need to zoom out on the fiddle to understand what i'm talking about as at 1000px the divs in question (service-section) will re-position to on top of each other</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;meta http-equiv="X-UA-Compatible" content="IE-edge"&gt;
          &lt;meta name="viewport" content="width-device-width", initial-scale=1&gt;
          &lt;title&gt; Learning Bootstrap&lt;/title&gt;
          &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
          &lt;!-- Latest compiled and minified CSS --&gt;
          &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous"&gt;
  
          &lt;!-- Optional theme --&gt;
          &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" integrity="sha384-aUGj/X2zp5rLCbBxumKTCw2Z50WgIr1vs/PFN4praOTvYXWlVyh2UtNUU0KAUhAX" crossorigin="anonymous"&gt;
  
          &lt;!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --&gt;
          &lt;!-- WARNING: Respond.js doesn't work if you view the page via file:// --&gt;
          &lt;!--[if lt IE 9]&gt;
            &lt;script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"&gt;&lt;/script&gt;
            &lt;script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"&gt;&lt;/script&gt;
          &lt;![endif]--&gt;
      &lt;/head&gt;
      &lt;body&gt;
  &lt;!------------------------Menu------------------------&gt; 
  
          &lt;nav id="menu-bar" class="navbar navbar-default" role="navigation"&gt;&lt;!--The menu bar--&gt;
            &lt;div class="container"&gt;
              &lt;div class="navbar-header"&gt;
                  &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-container"&gt;&lt;!--Menu bar toggle--&gt;
                      &lt;span class="sr-only"&gt;Show and hide the navigation&lt;/span&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;/button&gt;&lt;!--End of Menu bar toggle--&gt;
                  &lt;a class="navba-brand" href="#"&gt;
                      &lt;img src="images/hexagon.PNG" width="40px"&gt;
                  &lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="collapse navbar-collapse" id="navbar-container"&gt;
                  &lt;ul class="nav navbar-nav pull-right" &gt; &lt;!--Menu bar ul--&gt;
                      &lt;li &gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
                      &lt;li class="dropdown"&gt;
                          &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;About-us &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
                          &lt;ul class="dropdown-menu" role="menu"&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Work&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;History&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Team&lt;/a&gt;&lt;/li&gt;
                              &lt;li class="divider"&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Driving directions&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/li&gt;                           
                      &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;&lt;!--End of menu bar UL--&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/nav&gt;&lt;!--End of menu bar--&gt;
          &lt;header id="cover"&gt;
              &lt;h1 class="site-name"&gt;Hello Clarice&lt;/h1&gt;
              &lt;h4 class="slogan"&gt;It's nice to see you again.&lt;/h4&gt;
          &lt;/header&gt;
  &lt;!------------------------End of menu------------------------&gt;  
  
  &lt;!------------------------Services------------------------&gt; 
          &lt;div id="service-section-container" class="row"&gt;
              &lt;div id="section-title"&gt;
                  &lt;h1&gt;Services&lt;/h1&gt;
              &lt;/div&gt;
              &lt;div class="service-section col-md-4 "&gt;
                  &lt;h4&gt;Web design&lt;/h4&gt;
                  &lt;p&gt;This is a jumbotron class. It would span the width of a single column.&lt;/p&gt;
                  &lt;div class="button-container"&gt;
                      &lt;button class="btn btn-default"&gt;Read more&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="service-section col-md-4"&gt;
                  &lt;h4&gt;Online Marketing&lt;/h4&gt;
                  &lt;p&gt;This is a jumbotron class. It would span the width of a single column.&lt;/p&gt;
                  &lt;button class="btn btn-default"&gt;Read more&lt;/button&gt;
              &lt;/div&gt;
              &lt;div class="service-section col-md-4"&gt;
                  &lt;h4&gt;IT Consultancy&lt;/h4&gt;
                  &lt;p&gt;This is a jumbotron class. It would span the width of a single column.&lt;/p&gt;
                  &lt;button class="btn btn-default"&gt;Read more&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
      &lt;div class="row footer"&gt;
          &lt;p class="glyphicon glyphicon-copyright-mark pull-right"&gt;Copyright&lt;/p&gt;
      &lt;/div&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;!-- Latest compiled and minified JavaScript --&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>CSS</strong>:</p>
  
  <pre><code>    html, body{
      height:100%;
      margin:0;
  }
  @font-face{
      font-family:josefin;
      src: url('fonts/JosefinSans-Regular.ttf');
  }
  #cover{
      background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url('background.jpg') no-repeat;
      height: 494px;
      height:100vh;
      background-size:cover;
      display: flex !important;
      flex-direction:column;
      justify-content:center;
      align-items:center;
      /*margin-bottom:10px;*/
  }
  
  h1, h4{
      margin:0;
  }
  .row{
  
  }
  .footer{
      margin:0 !important;
      background-color:#ECF0F1;
  }
  p{
      margin:0 auto 20px !important;
      max-width:600px !important;
  }
  
  #menu-bar{
      margin-bottom:0 !important;
      position:absolute;
      display:block;
      width:100%;
      background:rgba(255, 255, 255, 0);
      border:0px;
      box-shadow: none;
  }
  #menu-bar a{
      color:black !important;
  }
  
  /**********************Services section**********************/
  #service-section-container{
      margin:0px;
      background-color: #F2F1EF;
      height:100%;
      width:100%;
      display:inline-block;
  }
  .service-section p, button{
      margin:10px !important;
  }
  #section-title{
      display: flex !important;
      justify-content:center;
      align-items:center;
      border-radius: 10px;
  }
  
  #section-title h1{
      text-align:center;
      border:1px solid #D2D7D3;
      border-radius:2px;
      margin:40px 10px 20px 10px !important;
      padding:20px;
  }
  .service-section{
      border-radius:2px !important;
      border:1px solid black;
      padding:0 20px;
      margin:1%;
      width:30% !important;
      border-radius:2px;
      background-color:#EEEEEE;
  }
  
  .service-section h4{
      text-align:center;
      margin:20px;
      font-weight:600;
      font-size:150%;
  }
  
  .service-section p{
      text-align:center;
  }
  .button-container{
      text-align:center;
  }
  .service-section button{
      margin: 10px auto !important;
      padding:5px;
  
      display:block;
      background-image:none;
      box-shadow:none;
  }
  /****&gt;1000px screen services section****/
  @media screen and (max-width:1000px){
      .service-section{
          width:85% !important;
          margin:0 auto !important;
          padding:0 !important;
      }
  }
  </code></pre>
  
  <p>Thanks in advance,</p>
  
  <p>J</p>