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:&nbsp;<canvas height="20" width="20" style="background-color:#F78181; border-radius:5px;"></canvas></td>
            <td class="td">Vacaciones de navidad:&nbsp;<canvas height="20" width="20" style="background-color:#81F781; border-radius:5px;"></canvas></td>
            <td class="td">Hoy:&nbsp;<canvas height="20" width="20" style="background-color:#DDDDDD; border-radius: 5px;"></canvas></td>
          </tr>
          <tr>
           <td class="td">Vacaciones de Pascua:&nbsp;<canvas height="20" width="20" style="background-color:#F2F5A9; border-radius:5px;"></canvas></td>
           <td class="td">Dias festivos:&nbsp;<canvas height="20" width="20" style="background-color:#E2A9F3; border-radius:5px;"></canvas></td>
           <td class="td">eventos:&nbsp;<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&iacute;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&oacute;n del IES Calvi&aacute;">
            </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">&nbsp;&iquest;Quienes somos?</font>&nbsp;&nbsp;<i class="fa fa-users" style="font-size: 30px; color: blue;"></i>&nbsp;&nbsp;&nbsp;&nbsp;</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">&nbsp;Gu&iacute;a</font>&nbsp;<i class="fa fa-download" style="font-size: 30px; color: blue;"></i>&nbsp;&nbsp;&nbsp;&nbsp;
            </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:

<link rel="stylesheet" href="estilos3.css">
      <link rel="stylesheet" href="style.css">

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