Resizing a browser

Hi guys, I m the very beginner, can’t find where is the issue.
while resizing the browser screen header text and svg goes all around the place , same for the footer google maps is getting out of the footer block. body is alright , resizing properly.
would be grateful if someone could write where am i wrong.
here is the code below and a picture how it looks in a smaller sized window

CSS

.heading_container
padding: 60px;
display: block;
z-index: 91;
margin-top: 30px;
margin-left: 50px;
margin-right: 50px;
text-align: center;
line-height: 20px;
background: #eaeaea;
color: #363375;
font-size: 25pxvw;
font-family: Verdana, Geneva, Tahoma, sans-serif;
border-radius: 20px;

Blockquote

CSS for svg
#logopic {
width: 300px;
height: auto;
float: right;
margin-right: 35px;
margin-top: 60px;
}