inanzitutto mai nomi di classi con lettere maiuscole!!
Se usi id nel css devi mettere "#" non "."
codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
<style>
#app1{
    
         border: solid;
      border-color: yellowgreen; 
      width: 15%;
      height:25%;
      margin-left: 5%;
      margin-right: :5%;
      margin-top: 6%; 
      float: left;     
      border-radius: 10px; auto; 
       
}




#app2{
       
       border: solid;
       border-color: bisque;
    
       width: 15%;
       height:25%; 
       margin-right: :5%;
       margin-left: 5%;
       margin-top: 6%; 
       float: left;
       border-radius: 10px; auto;
 
}

#app3{
       border: solid;
       border-color: beige;     
       width: 15%;
       height:25%;
       margin-right: 5%;
       margin-left: 5%;
       margin-top: 6%;  
       float: left;
       border-radius: 10px; auto;
}



#app4{
      
       border: solid;
       border-color: black;
 
       width: 15%;
       height:25%;
       margin-left: 5%;
       margin-top: 6%;  
       float: left;
       border-radius: 10px; auto;
}
</style>
</head>

<body>
<div id="app1" class="App1"> app1 </div>
<div id="app2" class="App2"> app2 </div>
<div style="clear:both">&nbsp;</div>
<div id="app3" class="App3"> app3 </div>
<div id="app4" class="App4"> app4 </div>

</body>
</html>