Pongo dos estilos css con <link> y se me mezclan los estilos.solucion?

Hola tengo este código :

Código:

<!DOCTYPE html>
<?php include_once('functions.php'); ?>
<script>
function mensaje1(){
alert("Solo para ADMINISTRADORES.\nPara añadir un enlace a la tabla, tiene que ir a su curso y grupo.");
}
</script>
<style>
.legenda_calendario {
background: none;
}

.titulo {
border-radius: 5px;
color: white;
text-shadow: 3px 3px 3px #8A4B08;
background: linear-gradient(#FE9A2E,#FF8000,#DF7401);
font-family: segoe script;
}
.subtitulo {
border-radius: 5px;
color: white;
text-shadow: 3px 3px 3px #8A4B08;
background: linear-gradient(#FE9A2E,#FF8000,#DF7401);
font-family: segoe script;
}
.td {
border-radius: 5px;
background: linear-gradient(#FFBF00,#FACC2E,#F7D358);
text-align: center;
font-family: segoe script;
}
</style>
<style>
.hr {
height: 60px;
width: 100%;
background: url('imagenes/lapiz separador 1.png') no-repeat center;
border: none;
background-size: 1100px;
}
</style>
<style>
.image1{
cursor: pointer;
width: 400px;
}
.image1:hover{
-webkit-filter: brightness(60%);
-o-filter: brightness(60%);
-ms-filter: brightness(60%);
-webkit-transition: 700ms;
-o-transition: 700ms;
-ms-transition: 700ms;
transition:700ms;
}
</style>
<style>
.display{
position: fixed;
right: 10px;
bottom: -10px;
width: 120px;
height: 45px;
background: rgba(139,139,139,0.9);
border-radius: 10px;
font-size: 20px;
font-family: segoe script;
src: url("DS-DIGIT.TTP") format("truetype");
text-align: center;
}
</style>
<style>
.red{
position: fixed;
top: 200px;
z-index: 100;
left: 0;
}
.social div a{
color: white;
font-size: 25px;
text-align: center;
width: 30px;
height: 30px;
padding: 10px 10px 10px 10px;
display: inline-block;
text-decoration: none;
}
.facebook{
background: #3b5998;
border-radius: 0 1rem 0 0;
}
.youtube{
background: #bb0000;
}
.googleplus{
background: #dd4b39;
}
.correo{
background: #666666;
}
.telf{
background: #FE9A2E;
}
.mensaje{
background: skyblue;
border-radius: 0 0 1rem 0;

}
.social a:hover{
width: 70px;
border-radius: 0 1rem 1rem 0;
-webkit-transition: 600ms;
-o-transition: 600ms;
-ms-transition: 600ms;
}
.social div:hover{
width: 10px;
}
</style>
<style>
.btn1{
background: transparent;
border: transparent;
}
</style>
<style>
.btn {
background: linear-gradient(#F5D0A9,#F7BE81,#FAAC58,#FE9A2E,#FF8000);
border: transparent;
border-radius: 10px;
cursor: pointer;
-webkit-transition:all 1s ease-in-out;
-moz-transition:all 1s ease-in-out;
-o-transition:all 1s ease-in-out;
transition:all 1s ease-in-out;
margin: 5px;
}
.btn:hover {
background: linear-gradient(#A9A9F5,#8181F7,#5858FA,#2E2EFE,#0000FF);
}
</style>
<style>
body::-webkit-scrollbar-track
{
box-shadow: inset 0 0 6px rgba(0,0,0,0.6);
background-color: rgb(191,191,191);
}
body::-webkit-scrollbar
{
width: 12px;
background-color: none;
border: none;
}

body::-webkit-scrollbar-thumb
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.6);
background-color: orange;
}
</style>
<style>
.image{
width: 500px;
cursor: pointer;
}
.image:hover{
-webkit-filter: brightness(60%);
-o-filter: brightness(60%);
-ms-filter: brightness(60%);
-webkit-transition: 700ms;
-o-transition: 700ms;
-ms-transition: 700ms;
transition:700ms;
}
</style>
<html>
<head>
<meta charset="UTF-8">
<title> 1 ESO A</title>
<link rel="stylesheet" href="estilos3.css">
<link rel="stylesheet" href="style.css">
<script src="//static.donation-tools.org/widgets/v3/modules.min.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="reloj.js"></script>
<link rel="icon" type="image/ico" href="imagenes/logo_GTE.ico">
</head>
<script>
$(document).ready(function(){
var altura = $('.menu').offset().top;

$(window).on('scroll', function(){
if ( $(window).scrollTop() > altura ){
$('.menu').addClass('menu-fixed');
} else {
$('.menu').removeClass('menu-fixed');
}
});

});
</script>
<body style="background-image: url(imagenes/stackofmagazines.jpg); background-repeat: no-repeat; background-attachment: fixed; background-position: center; background-size: cover;" onload="reloj()">
<div class="contenedor">
<a href="http://www.ies-calvia.260mb.net" style="text-decoration:none;"><img src="imagenes/logo_GTE.png" style="position: absolute; height: 100px; width: 100px"></a>
<br>
<br>
<br>
<br>
<br>
<br>
<nav class="menu">
<ul>
<li class="dropdown">
<a href="http://ies-calvia.260mb.net/GTE/ESO/1_eso" class="dropbtn">1 ESO</a>
<div class="dropdown-content">
<a href="#">1º A</a>
<a href="#">1º B</a>
<a href="#">1º C</a>
<a href="#">1º D</a>
<a href="#">1º E</a>
<a href="#">1º F</a>
</div>
</li>
<li class="dropdown">
<a href="http://ies-calvia.260mb.net/GTE/ESO/2_eso" class="dropbtn">2 ESO</a>
<div class="dropdown-content">
<a href="#">2º A</a>
<a href="#">2º B</a>
<a href="#">2º C</a>
<a href="#">2º D</a>
<a href="#">2º E</a>
<a href="#">2º F</a>
</div>
</li>
<li class="dropdown">
<a href="http://ies-calvia.260mb.net/GTE/ESO/3_eso" class="dropbtn">3 ESO</a>
<div class="dropdown-content">
<a href="#">3º A</a>
<a href="#">3º B</a>
<a href="#">3º C</a>
<a href="#">3º D</a>
<a href="#">3º E</a>
<a href="#">3º F</a>
</div>
</li>
<li class="dropdown">
<a href="http://ies-calvia.260mb.net/GTE/ESO/4_eso" class="dropbtn">4 ESO</a>
<div class="dropdown-content">
<a href="#">4º A</a>
<a href="#">4º B</a>
<a href="#">4º C</a>
<a href="#">4º D</a>
<a href="#">4º E</a>
<a href="#">4º F</a>
</div>
</li>
<li style="float:right;"><a href="http://www.ies-calvia.260mb.net"><i class="fa fa-home" style="font-size:25px;"></i></a></li><li style="float:right;"><a href="https://sites.google.com/site/iescalvia/organitzacio/equip" target="_blank">¿Quienes somos?</a></li>
</ul>
</nav>
<div class="contenido">
<br>
<br>
<center><font face="segoe script" size="8" color="#666666">1 ESO A</font></center>
<div class="calendar_div">
<?php echo getCalender(); ?>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<table align="center" class="legenda_calendario" height="20" width="700">
<th colspan="2" class="subtitulo">Inicio de curso y vacaciones</th>
<th colspan="3" class="titulo">otros</th>
<tr>
<td class="td">Inicio de curso: <canvas height="20" width="20" style="background-color:#F78181; border-radius:5px;"></canvas></td>
<td class="td">Vacaciones de navidad: <canvas height="20" width="20" style="background-color:#81F781; border-radius:5px;"></canvas></td>
<td class="td">Hoy: <canvas height="20" width="20" style="background-color:#DDDDDD; border-radius: 5px;"></canvas></td>
</tr>
<tr>
<td class="td">Vacaciones de Pascua: <canvas height="20" width="20" style="background-color:#F2F5A9; border-radius:5px;"></canvas></td>
<td class="td">Dias festivos: <canvas height="20" width="20" style="background-color:#E2A9F3; border-radius:5px;"></canvas></td>
<td class="td">eventos: <canvas height="20" width="20" style="background-color:#B9FFFF; border-radius:5px;"></canvas></td>
</tr>
</table>
<div class="red">
<div class="social">
<div><a href="https://www.facebook.com/ies.calvia" target="_blank" class="fa fa-facebook-square facebook"></a></div>
<div><a href="https://www.youtube.com/user/iescalviablog" target="_blank" class="fa fa-youtube-play youtube"></a></div>
<div><a href="https://plus.google.com/114947718295379948989" target="_blank" class="fa fa-google-plus googleplus"></a></div>
<div><a href="mailto:iescalvia@gmail.com" class="fa fa-envelope correo"></a></div>
<div><a href="tel:+34971690229" class="fa fa-volume-control-phone telf" title="+34 971690229"></a></div>
<div><a href="fax:+34971694931" class="fa fa-fax mensaje" title="+34 971694931"></a></div>
</div>
</div>
<div class="display" id="pantalla" style="z-index: 100;"></div>
<footer>
<div style="bottom:500px;">
<a href="http://moodle2.iescalvia.com/" target="_blank" style="text-decoration: none;">
<img src="imagenes/moodle.png" style="position: absolute; height: 60px; width: 100px; left: 130px; bottom: -590px;" title="Moodle">
</a>
<a href="https://web2.alexiaedu.com/ACWeb/LogOn.aspx?key=WRcKBnV4m3M%3d" target="_blank" style="text-decoration: none;">
<img src="imagenes/Alexia1.png" style="position: absolute; height: 65px; width: 65px; left: 40px; bottom: -590px;" title="Alexia">
</a>
<a href="https://www.bachilleratoartistico-iescalvia.com/" target="_blank" style="text-decoration: none;">
<img src="imagenes/batart.png" style="position: absolute; height: 60px; width: 60px; left: 250px; bottom: -590px;" title="Bachillerato artístico">
</a>
<a href="http://iescalviablog.blogspot.com.es/" target="_blank" style="text-decoration: none;">
<img src="imagenes/pillospress.png" style="position: absolute; height: 70px; width: 180px; left: 330px; bottom: -600px;" title="Pillo's press">
</a>
<a href="http://www.cucalvia.com/" target="_blank" style="text-decoration: none;">
<img src="imagenes/CUC.png" style="position: absolute; height: 60px; width: 70px; left: 530px; bottom: -590px;" title="CUC">
</a>
<a href="http://weib.caib.es/" target="_blank" style="text-decoration: none;">
<img src="imagenes/weib.png" style="position: absolute; height: 60px; width: 150px; left: 600px; bottom: -590px;" title="weib">
</a>
<a href="http://iescalvia.blogspot.com.es/" target="_blank" style="text-decoration: none;">
<img src="imagenes/bloggeries.png" style="position: absolute; height: 60px; width: 150px; left: 40px; bottom: -690px;" title="Información del IES Calviá">
</a>
<a href="http://www.erasmusplus.gob.es/" target="_blank" style="text-decoration: none;">
<img src="imagenes/erasmus.png" style="position: absolute; height:60px; width: 160px; left: 200px; bottom: -690px;" title="Erasmus">
</a>
<a href="https://www3.caib.es/xestib/xestib/menu/iniciGestio" target="_blank" style="text-decoration: none;">
<img src="imagenes/GESTIB2.0.jpg" style="position: absolute; height:50px; width: 160px; left: 380px; bottom: -690px;" title="GESTIB">
</a>
</div>
<font face="segoe script" size="5" style="position:absolute; bottom:-650px; left:800px;">
email:<a href="mailto:iescalvia@gmail.com" target="_blank">iescalvia@gmail.com</a>
<br>
tel: <a href="tel:+34971690229" target="_blank">971690229</a>
<br>
fax: <a href="fax:+34971694931" target="_blank">971694931</a>
</font>
<a href="https://sites.google.com/site/iescalvia/organitzacio/equip" target="_blank" style="text-decoration: none;">
<button class="btn" style="position: absolute; left: 1100px; bottom: -630px;"><font face="segoe script" size="3"> ¿Quienes somos?</font>  <i class="fa fa-users" style="font-size: 30px; color: blue;"></i>    </button>
</a>
<a href="guia.pdf" download="guia.pdf" style="text-decoration: none;">
<button class="btn" style="position: absolute; left: 1100px; bottom: -670px;">
<font face="segoe script" size="3"> Guía</font> <i class="fa fa-download" style="font-size: 30px; color: blue;"></i>    
</button>
</a>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<a href="http://www.ies-calvia.260mb.net/GTE/" style="text-decoration: none;">
<button class="btn1" style="cursor: pointer; z-index: 100; left: 50%;" title="Volver"><i class="fa fa-arrow-left" style="font-size: 40px; color: orange;"></i></button>
</a>
</footer>
</div>
</body>
</html>

Puse dos <link>:

Código:

Que es de elementos diferentes; uno, es el calendario y el otro es un menu desplegable scroll.

Y abría una manera para solucionar esto?

Gracias