% & rem/em

• width в %
• min и max width вместо width
• margin:
  • flex: justify-content: space-between
  • inline-block:

    
    article       {width: 46%;}
    left-sidebar  {width: 25%;}
    right-sidebar {width: 25%;}
    /* 100% - 46% - 25% * 2 =  4% */
    
    /*  ОШИБКА */ 
    article       {margin-rigth: 2%;}
    left-sidebar  {margin-rigth: 2%;}
                       

  • /* Правильно */

    
    .article-wrp  {width: calc(46% + 2%);}
    /* 48% - 100%
    2%  - x
    x = 2 * 100 / 48 = 4,166
    */
    .article      {width: calc(100% - 4,16%);}
                        

    Пример расчета inline-block
• padding /* rem\em */