why does gradient CSS not working fon ull screen

Question

I'm having a trouble with gradient css. for some reason when gradient finish i see the start gradient in a small line at the end.

 html , body{
            height: 100%;
            width: 100%;
           
        }
        body{
            font-family:Arial, Helvetica, sans-serif ;
            background: #bef5f5;  /* this is to make sure if one of the browsers arent going to read the gradient, so this is a backup background color */
            background: -moz-linear-gradient(top, #833ab4 0%, #fd1d1d 50%, #cc640e 100% );
            background: -webkit-linear-gradient(top, #833ab4 0%, #fd1d1d 50%, #cc640e 100% );
            background: linear-gradient(top, #833ab4 0%, #fd1d1d 50%, #cc640e 100% );
        }
        .designHeader{
            color: #ffffff;
        }
        .full{
            height: 100% ;
            width: 100%;
        }
        .mainFooter{
            margin: 100 px;
            background-image: url("pexels-pok-rie-268261.jpg");

        }