Попытка заставить Медиа Запросы работать на Портрет ИЛИ Пейзаж

Таким образом, проблема в основном двоякая:

1) У вас есть несколько ошибок в вашем css. Используя валидатор, я обнаружил 13 ошибок. - Там декларации, которые закрыты (отсутствует закрывающая фигурная скобка - }), например, ваша декларация для #nav a:hover - В других местах есть дополнительные/блуждающие закрывающиеся фигурные скобки. - Недопустимый цвет фона и свойства цвета. У вас есть div.1, что подразумевает класс "1". Это не допустимый класс в соответствии с валидатором.

2) Медиа-запрос содержит слишком много правил. Вы должны только вводить правила в медиа-запрос, который заменяет/отменяет предыдущие правила или новые правила. У вас есть много правил, которые просто повторяют ваши другие общие правила css.

Очистите ошибки. Попробуйте запустить их через валидатор W3C CSS - вы можете скопировать и вставить свой css напрямую, чтобы увидеть, есть ли/там, где есть ошибки.

Затем упростите свой медиа-запрос css, чтобы включить только необходимые измененные правила (и только конкретные свойства, которые необходимо изменить).

Примечание. Я смог проверить его, очистив ошибки. Для вашей справки действительный/чистый CSS ниже.

Вам все еще нужно упростить, и код ниже не обязательно гарантированно работает. Я бы посоветовал вам чрезмерно упростить - поместите одно правило в свой медиа-запрос для границы, цвета фона или чего-то еще, чтобы увидеть, будет ли загружен медиа-запрос. Затем вы можете работать над добавлением различных стилей, которые вам нужны.

body {background-image:url('../images/space1.jpg');
    background-repeat:no-repeat;
    background-size:200%;
}

body {
    color:white;
}

a, a:visited { 
    color:#3399FF; 
    text-decoration:none;
}

div.header{
    text-align:right;
    font-size:200%;
}

div.header1 {
    text-align:right;
    font-size:125%;
}

div.logo{
    margin-top:-40px;
}

#nav{
    width:85%;
    height:3%;
    font-size: 26px;
    font-weight: bold;
    border-radius: 8px;
    text-align: center;
    margin: 0 auto;
    position:absolute;
    top:100px;
    left:120px;
}

#nav ul {
    height: auto;
    padding: 0px 0px;
    margin: 0px;
    background-color: #f2f2f2;
    border-bottom: 1px solid #ccc; 
    display: inline-block;
}

#nav li { 
    display: inline-block;
    padding: 20px; 
    margin-left: auto;
    margin-right: auto;
}

#nav a {
    text-decoration: none;
    color:#3399FF;
    padding: 8px 8px 8px 8px;
}

#nav a:hover {
    color: #000000;
    background-color: #FFF;
}

li:hover ul { 
    display: block; 
}


nav ul ul {
    display: none;
}

nav ul li:hover > ul {
    display: block;
}

div.qui {
    text-align:center;
    font-size:200%;
    text-decoration:underline;
}

div.specs {
    text-align:center;
    font-size:175%;
}

ul.qui {
    text-align:center;
    font-size:150%;
    list-style-type: none;
}

.images {
    overflow: hidden;
}

.images img {
    float: left;
    margin: 0px;
}

div.one {
  text-align: center;      
}

.left {
    float: left;
    margin-left:20%;
    padding:10px;
    border:3px solid #585858 ;
}

.right {
    float: right;
    margin-right:20%;
    padding:10px;
    border:3px solid #585858 ;
}

p.v {
    text-align:center;
}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {

    div.header{
        text-align:right;
        font-size:120%;
    }

    div.header1 {
        text-align:right;
        font-size:85%;
    }

    div.logo{
        margin-top:-40px;
    }

    div.logo {
        height:150px;
        width:320px;
    }   

    #nav{
        width:85%;
        height:3%;
        font-size: 30%;
        font-weight: bold;
        border-radius: 8px;
        text-align: center;
        margin: 0 auto;
        position:absolute;
        top:100px;
        left:120px;
    }

    #nav ul {
        height: auto;
        padding: 0px 0px;
        margin: 0px;
        background-color: #f2f2f2;
        border-bottom: 1px solid #ccc; 
        display: inline-block;
    }

    #nav li { 
        display: inline-block;
        padding: 5px; 
        margin-left: auto;
        margin-right: auto;
    }

    #nav a {
        text-decoration: none;
        color:#3399FF;
        padding: 8px 8px 8px 8px;
    }

    #nav a:hover {
        color: #000000;
        background-color: #FFF;
    }

    li:hover ul { 
        display: block; 
    }



 nav ul ul {
        display: none;
    }

    nav ul li:hover > ul {
            display: block;
    }

    div.qui {
        text-align:center;
        font-size:200%;
        text-decoration:underline;
    }

    div.specs {
        text-align:center;
        font-size:175%;
    }

    ul.qui {
        text-align:center;
        font-size:150%;
        list-style-type: none;
    }

    .images {
        overflow: hidden;
    }

    .images img {
        float: left;
        margin: 0px;
    }

    div.one {
      text-align: center;      
    }

    .left {
      float: left;
      margin-left:0%;
      padding:0px;
       border:3px solid #585858 ;
    }

    .right {
      float: right;
      margin-right:0%;
      padding:0px;
       border:3px solid #585858 ;
    }

    p.v {
        text-align:center;
    }
}