What is a relation between width and the padding in CSS and how to use it?

The use of width with padding might confuse you because it is a bit complicated to work with.It is generally seen that while using width to 100% and using padding creates the element larger than expected ,its not a myth just a misconception,have a look:
The default display value of div is block.If you will set the padding then it won't effect the width but it will cover the whole width.But if you will add width 100% and try add any padding mean you want the whole 100% as well as extra padding that will cause the extra space taking by the element.The picture below describes it a bit more:

How to solve it?

The best way to solve it by using the padding and width with a relation that if you want the container is 600px and if you want padding of 20px from each side then,make it width to 560px so that it may adjust in your desire width.

Or

You can use flex box (Flexible box).The result is below:

See the Pen Use of Flex box by Mohammad Hamza Dhamiya (@hamzadhamiya) on CodePen

To read more about Flex box read this (CSS-Tricks)