title: How to position divs when starting a frontend project? How do you get the CSS boiler plate code setup?
body: <p><strong>Can any experienced front-end developer just explain how do they get the blocks in the right place  when they start (<em>You know like the CSS boilerplate</em>)</strong></p>
  
  <p>I have been trying to learn frontend and although I have gone through the basics many times now, I still don't know how to break the display into blocks and position them at positions where I want them to.</p>
  
  <p>Once the outer divs are placed I am easily able to proceed but it's the outer components that don't fit in the right place. I have many things, grids, react components, flexbox, but every time I end up either setting the margins of the outermost wrapper manually (pixel by pixel by opening dev tools) or by using some existing templates out there.</p>
  
  <blockquote>
    <p>I know people will say that show me the code, but the point is I do have code that works and there are no bugs, I do end up making the project. But why can't I just do like <code>position: absolute; margin: 12% 20%</code> and get the outer div in the center. (<em>Whenever I do that either shows a negative margin on either sides or if I try to manipulate an existing template, everything just breaks</em>)</p>
    
    <p>I get the themes from bootstrap and have gotten used to using them, but feel like I am trapped when I try to apply my own styles</p>
  </blockquote>