結論

box-sizing: border-box;を使います。

解説

例えば、以下のように指定すると、.class2では中の要素の幅が50%になるように表示されるので、borderで囲われる範囲はpaddingの分だけ大きくなってしまいます。言い換えると、50%+1remの幅になってしまいます。

.class1{width:50%;margin:0;padding:0;border:solid;}.class2{width:50%;margin:0;padding:1rem;border:solid;}

そこで、以下のように、box-sizing: border-box;を追加することで、要素の幅とpaddingを足したものがwidth: 50%になるので、paddingの異なる要素同士で、幅をそろえることができます。

.class1{width:50%;margin:0;padding:0;border:solid;}.class2{width:50%;margin:0;padding:1rem;border:solid;box-sizing:border-box;}