How to externally css

HTML-CSS
#1 
<link rel="stylesheet" type="text/css" href="css/product.css" media="screen">
</head>

tried link my css it’s in a folder called css i had to start over and tried to import my css styles and I linked my css everything imported but the css styles.

#2 
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

@media only screen and (max-width: 768px) {
  /* For mobile phones: */
  [class*="col-"] {
    width: 100%;
  }

  #form{
  max-width: 550px;
  margin: 0 auto;
  background:#011627ff;
  padding: 30px;
  border-radius: 5px;
  box-shadow: 0 0 10px #011627ff;
  margin-top: 10px;



}

.input-fields{
  display: flex;
  flex-direction: column;
  margin-right: 4%;
}
.input-fields textarea{
  width: 48%
}
.input-fields .input textarea{
  margin: 10px 0;
  background:transparent;
  border: 0;
  border-bottom: 2px solid;
  padding: 10px;
  width: 100%
  background-color:#011627ff;

  

}

textarea{
  height: 212px;
  margin-top: 10px;
}
.input-button{
   margin-left:  470px;
   margin-right: 20px;


}
label{
  color: white;

}


ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-image: url(https://cutewallpaper.org/21/backgrounds-sky/PNG-Sky-Background-Transparent-Sky-Background.PNG-Images-.png));
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;

}

/* Change the link color to #111 (black) on hover */
li a:hover {
  background-image:url(https://cutewallpaper.org/21/backgrounds-sky/PNG-Sky-Background-Transparent-Sky-Background.PNG-Images-.png);
 color: none;

}



header img{
  width: 100px;
         margin-left: 500px;
         display: block;
         margin: auto;
         float: right;
         padding: 0px 0px;
         margin-right: 650px;

}

body{
  background-image: url(https://cutewallpaper.org/21/backgrounds-sky/PNG-Sky-Background-Transparent-Sky-Background.PNG-Images-.png);
}
#3

Screen Shot 2020-12-17 at 12.52.49 AM
Screen Shot 2020-12-17 at 12.52.49 AM2880×1800 520 KB

#4

Is your css folder just on the desktop by itself? Or is it in a folder with your other project files like html files?

#5