When iam inserting an image as section in the middle of the web site then it was coming very big

To explain this to you: the image size you see is that size of the actual image and if it came from a camera, for example, even at only 12 MPixels it's 3000x4000 pixels in size and much bigger than your screen.

You need to use styles for this. Simple ones, like height and width, but there are also some very much more interesting ones.

In all cases, you must scale your images to fit the screen area where you wish them to be confined.

Your CSS specifies that the image should be 2000px wide and 1000px high.

If you don't want it to overflow, you have several options. The simplest is:

head-image img{
    max-width: 100%;
    height: auto;
}

If you know the aspect ratio of the image, you may also want to specify the new aspect-ratio property[^] so that your content doesn't shift after the image has downloaded.

There's also the object-fit property, which works everywhere except Internet Explorer:
object-fit - CSS: Cascading Style Sheets | MDN[^]