Make padding responsive

Use percentage as a unit of measurement while making your website responsive. Pixels does not work if you want it to be responsive. If you use percentage, the measurement is taken with respect to the size of the screen. But if you use pixels, the padding remains the same for all sizes. Simply, alter your CSS as shown below:

#i-container{
        border: solid;
        border-color: rosybrown;
        padding-left: 12%;
        padding-top: 0.5%;
    }

Use your desired percentage.

There are values in CSS that are for sizing things in relation to the viewport (the size of the browser window). One unit is 1% of one of the axes of the viewport. These can be useful for responsive design, that is, designing websites that look good across different screen sizes, taking advantage of the space available to them.

padding: 1vw // 1% of viewport width
padding: 1vh // 1% of viewport height
padding: 1vmin // 1vw or 1vh, whichever is smaller
padding: 1vmax // 1vw or 1vh, whichever is larger

and you can also use grid based layout from bootstrap