Q:

Colour the footer bootstrap to make it responsive

As you can see, on large, medium and small screens the footer has the correct background default color (due to the panel_footer class) but, as soon as the three section stack upon each other you can see part of the footer coloured with the background colour of the page.  How to style the footer in a way the colour is uniformed? 
Here the Code:

  body {
  background-color: #d4f9f7;
  font-family: 'Raleway', sans-serif;
}

#logoheader {
  background: url('../images/logosmall.jpg') no-repeat;
  width: 170px;
  height: 170px;
  margin-left: 30px;
}

#generalmenu {
  margin-top: 110px;
  font-size: 1.8em;
}

#navlist {
  font-size: 1.6em;
  background-color: #d4f9f7;
}

#mainpage {
  background: url('../images/prague_exper.jpg') no-repeat;
  background-size: cover;
  height: 50vw;
  box-shadow: 0 0 50px #ffff;
  border: 2px solid #ffff;
}


/* Get on Board + Learning & Development Consultancy */

#intestazione {
  text-align: center;
}


/* Get on Board */

#maintitle {
  color: #ffffff;
  font-size: 8vw;
  text-shadow: 1px 1px 1px #222;
}


/* Learning & Development Consultancy */

#subtitle {
  font-size: 2vw;
  text-shadow: 1px 1px 1px #222;
  color: #ffffff;
}

#footer {
  height: 200px;
}


/*Media Queries*/

@media (max-width: 768px) {
  #subtitle {
    visibility: hidden;
  }
  #logoheader {
    background: url('../images/logoxs.jpg') no-repeat;
    margin-left: 120px;
  }
  #mainheader {
    height: 120px;
  }
  #navlist {
    font-size: 1.1em;
    background-color: #d4f9f7;
  }
  #mainpage {
    margin-top: 60px;
  }
<! DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="C:\Users\Gianpa\Desktop\banco di prova coding\sito prova\css\bootstrap.min.css">
  <link rel="stylesheet" href="C:\Users\Gianpa\Desktop\banco di prova coding\sito prova\css\banco prova css.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
  </script>
  <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
</head>

<body>

  <header>
    <nav id="mainheader" class="navbar navbar-default">
      <div class="container-fluid">
        <!--  Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a id="logoheader" class="navbar-brand" href="#"></a>
        </div>

        <!--  general menu for all devices except xs ones -->
        <ul id="generalmenu" class="nav navbar-nav navbar-right visible-lg visible-md visible-sm">
          <li><a href="#"><b>Home</b></a></li>
          <li><a href="#"><b>Servizi</b></a></li>
          <li><a href="#"><b>Contattaci</b></a></li>
          <li><a href="#"><b>Referenze</b></a></li>
        </ul>

        <!--  Menu on the right -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul id="navlist" class="nav navbar-nav hidden visible-xs">
            <li><a href="#"><b>Home</b></a></li>
            <li><a href="#"><b>Servizi</b></a></li>
            <li><a href="#"><b>Contattaci</b></a></li>
            <li><a href="#"><b>Referenze</b></a></li>
          </ul>
        </div>
      </div>
    </nav>
  </header>

  <!--  jumbotron AkA Prague image and main Get On Board write -->
  <div id="mainpage" class="jumbotron img-responsive">
    <div id="intestazione">
      <h1 id="maintitle" class="display-3">Get On Board</h1>
      <p id="subtitle">Learning & Development Consultancy</p>
    </div>
  </div>

  <! --Footer-->
  <footer class="panel-footer">
    <div id="footer" class="container">
      <div class="row">
        <section id="hours" class="col-sm-4">
          <span>Hours:</span><br> Sun-Thurs: 11:15am - 10:00pm<br> Fri: 11:15am - 2:30pm<br> Saturday Closed
          <hr class="visible-xs">
        </section>
        <section id="address" class="col-sm-4">
          <span>Address:</span><br> 7105 Reisterstown Road<br> Baltimore, MD 21215
          <p>* Delivery area within 3-4 miles, with minimum order of $20 plus $3 charge for all deliveries.</p>
          <hr class="visible-xs">
        </section>
        <section id="testimonials" class="col-sm-4">
          <p>"The best Chinese restaurant I've been to!  And that's saying a lot, since I've been to many!"</p>
          <p>"Amazing food!  Great service!  Couldn't ask for more!  I'll be back again and again!"</p>
        </section>
      </div>
    </div>
  </footer>


</body>

A:

In your CSS, remove the height from your footer:
#footer {
  height:200px;
}

Defining this height as you did will tweak the default Bootstrap's behavior on column stacking.  If you would like to maintain this property, then define it on larger devices, on their respective media-queries. 
E.g.:
@media (max-width: 768px) {
  #footer {
    height: 200px;
  }
}

Here's a link to the Working Fiddle. 

PS (unrelated to question): You are importing your css files as such:
<link rel="stylesheet" href="C:\Users\Gianpa\Desktop\banco di prova coding\sito prova\css\bootstrap.min.css">
<link rel="stylesheet" href="C:\Users\Gianpa\Desktop\banco di prova coding\sito prova\css\banco prova css.css">

I would suggest renaming "banco prova css.css" to "banco_prova_css.css", and importing Bootstrap's css from a CDN, for example: 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

