How to insert blocks, and images in CSS Grid without messing up the layout?

Recently asked the question about the creation of the website. The case was postponed, and the interest to learn and understand will not go away, so I started to create my own website from scratch.
First off the location of the blocks. Padding, margin etc. Then I came across a description flexbox. Read about "fashion" Grid, positioned the blocks. Began to draw site pictures, add blocks in the other. Each element spoils the neat look of the site. Apparently, something need to be rewritten or even from scratch to do?
Wanted in the sidebar to put the picture, set max-width for the block size in px, then the width of the page increased in size.
Link to code
PS Border to all the blocks asked for clarity, essentially the very same for myself
June 27th 19 at 15:11
1 answer
June 27th 19 at 15:13
Solution
For the img max-width: 100%
https://jsfiddle.net/den6e937/

.sidebar img { max-width: 378px;} - where did 378 points?

Setting the maximum block size in px, you need to remember about borders and padding or use box-sizing: border-box

p.s. grid is still very early to use only for study and training.
Divam is also max-width: 100% ask?
My logic is this: while I will learn tolerably to impose, the Grid will become more popular. By the time I'd be aware of how and what with to do it. Plus I love its brevity and simplicity. - melvina.Howell commented on June 27th 19 at 15:16
have div'and natural width 100%, so that by itself it will not come out. And the further destiny depends on your properties.

From the question it is clear only about the picture. What's wrong with divas - no. - Elmer.Upt commented on June 27th 19 at 15:19

Find more questions by tags CSSHTML