How can I send my footer towards the bottom of my screen and how can I extend it to the full screen in a responsive way?
[![enter image description here](https://i.stack.imgur.com/19lSB.jpg)](https://i.stack.imgur.com/19lSB.jpg)

Footer.css:

```
* {
  margin: 0;
}
html, body {
  height: 100%;
}
.page-wrap {
  min-height: 100%;
  margin-bottom: -142px; 
}
.page-wrap:after {
  content: "";
  display: block;
}
.site-footer, .page-wrap:after {
  height: 142px; 
}
.site-footer {
  background: black;
}

.text{
  color: white;
}

```

Footer.tsx:

```
const Footer = () => (
  <footer className="site-footer">
  <p className = 'text'>  APP</p>
</footer>
  );

  export default Footer;

```