css - How do i make home page responsive? Wordpress

Question

Wordpress updated this site and the home page is now not responsive. Hero image is not filling up the entire screen. Another odd thing is if you increase and decrease (stretch) the browser window then the home page automatically continually increases to infinity. Any ideas on what is going on and how to fix this? Appreciate any input. I am just a newbie coder,

.banner .item {  
    background-size: cover;  
    background-position: 50%;  
    position: relative;  
    overflow: hidden;  
}

I tried

.banner .item {
   width: 100%;
   height: auto;
}

with no success.

Hard setting to specific pixel velues works fine, but its not what I am after. I need it to be responding to the browser size. What am I missing?

.banner .item {
   height: 700px;
}

URL: https://michaelhewat.com/

Incorrect:

Correct:

Answer 1

Instead of

.banner .item {
  height: 700px;
}

You can use full viewport(vh) - the header(px)

.banner .item {
  height: calc(100vh - 126px);
}

It will do what you are looking for ;)