Как в блоке footer, 2 вложенных блока раположить по краям от навигационного меню

/*  * - означает примениния стиля для всех элементов в текущей странице*/
 
* {
    margin: 0; /* внешний отступ*/
    padding: 0; /* внутренний отступ*/
}
 
/*  Стили для ссылок*/
 
a {
    text-decoration: none; /* отключение стилизации ссылок*/
}
 
/* для списков*/
 
li {
    text-decoration: none;
    list-style: none;
}
 
/* list-style - Универсальное свойство, позволяющее одновременно 
    задать стиль маркера, его положение, 
    а также изображение, которое будет 
    использоваться в качестве маркера списка.*/
 
 
/* укажем семейство шрифтов, которое будет использовано в теле документа.
*/
body {
    font-family: 'Raleway', sans-serif; /* sans-serif - "рубленый" шрифт */
}
 
/*Название в заголовке*/
.headerName {
    font-family: Garamond;
    font-size: 30px;
    color: #ffffff;
    padding-top: 35px;
    padding-left: 25px;
}
 
.logo {
    background: #8289ad; /* черный цвет фона*/
    width: 100%; /* то есть заполнение на всю ширину текущего разрешения экрана*/
    display: flex; /*Преобразует элемент в блочный flex-контейнер. 
        Все дочерние элементы данного контейнера автоматически 
        становятся flex-элементами. */
    justify-content: center; /*  justify-content указывает, 
        каким образом будут выравниваться 
        flex-элементы по горизонтали, 
        внутри flex-контейнера. */
 }
 
/* display -  указывает тип элемента. 
    От типа элемента зависит то, как он будет 
    отображаться на веб-странице.*/
 
.graficlogo {
    padding: 5px; /* внутренний отсуп от родительского блока*/
    max-width: 95%; /*Устанавливает максимальную ширину элемента. 
        Значение ширины элемента будет вычисляться в зависимости от 
        значений установленных свойств width, max-width и min-width.*/
    box-sizing: border-box; /* данное свойство изменяет алгоритм расчета 
        высоты и ширины элемента*/
    float: right;/*Выравнивает элемент по правому краю, а все остальные 
        элементы обтекают его по левой стороне.*/
 
}
 
/* эффект для логотипа, при наведении - выделяется другим цветом*/
.logo img:hover{
    background:#b6ff00;
}
 
 
/* стилизация тега nav*/
nav {
    margin: auto; /* Устанавливает величину отступа от каждого края элемента.
        auto - означает, что отступы автоматически рассчитываются браузером
    */
    width: 800px;
    height: 50px;
}
 
/* стилизация меню*/
.topnav {
    background-color: #ffffff; /* белый цвет*/
    font-size: 14px;
    margin-top: 40px; /* внешний отступ от верха*/
}
 
    /* стилизация ссылок меню*/
    .topnav a {
        color: #000000; /* черный цвет меню*/
        text-align: center; /* выравнивание по горизонтали, по центру, внутри родительского элемента*/
        padding: 14px 16px; /* внутренние оступы: 14px - сверху и снизу от содержимого, 
        16px - слева и справа от содержимого */
        font-size: 15px;
    }
 
        /* добавление эффектов для ссылок, используем псевдокласс :hover*/
 
        .topnav a:hover {
            border-bottom: 2px solid #000000; /*нижняя часть рамки, черного цвета*/
        }
 
    .topnav .icon {
        display: none;
    }
 
 
/* адаптируем изображение*/
.media-width-100 {
    max-width: 100%;
}
 
.advantages-container {
    display: flex; /*   Преобразует элемент в блочный flex-контейнер. 
        Все дочерние элементы данного контейнера 
        автоматически становятся flex-элементами. */
    justify-content: center; /* выравнивание элементов 
        вдоль горизонтальной оси*/
}
 
.advantages {
    padding-top: 40px; /* отступ сверху*/
    padding-bottom: 40px; /*отступ снизу*/
    width: 70%; /* занимает 70% ширины родительского блока*/
    display: flex; /* размещаем в одну строку*/
    justify-content: space-between; /* выравнивание по горизонтальной оси,
        Флексы равномерно распределяются по всей строке. 
        Первый и последний элемент прижимаются к соответствующим 
        краям контейнера.
    */
    text-align: center; /* выравнивание текста по горизонтали, по центру*/
    flex-wrap: wrap; /*Указывает, что flex-элементы при необходимости 
        могут переноситься на следующую строку, если на предыдущей 
        не хватает места.*/
}
 
/* отдельный элемент списка 'преимуществ'*/
.advantages-items {
    width: 30%;
}
 
/* Адаптация под экраны, шириной меньше чем  768px*/
@media screen and (max-width: 768px) {
 
    .topnav a:not(:first-child) {
        display: none; /* Временно удаляет элемент из документа.*/
    }
 
    /*для ссылки-графической_иконки*/
    .topnav a.icon {
        float: right; /* Выравнивает элемент по правому краю, 
           а все остальные элементы обтекают его по левой стороне.*/
        margin-top: -17px; /* вывести вернюю часть данной иконки, за внешнюю границу блока div*/
        display: block; /*определяется браузером как блочный элемент,
           имеет разрыв строки до и после элемента и 
           занимает всю доступную ширину*/
        color: black;
    }
 
    nav {
        width: 100%;
        /*высоту указывать не будем, так как 
            она наследуется nav, который мы определили выше.*/
    }
 
    /* .responsive - адаптивный*/
    .topnav.responsive {
        position: relative; /*Относительное позиционирование. 
            Положение элемента устанавливается относительно 
            его исходного места. Добавление свойств left, 
            top, right и bottom изменяет позицию элемента 
            и сдвигает его в ту или иную сторону 
            от первоначального расположения.*/
    }
 
        /* для ссылки-иконки(графической)*/
        .topnav.responsive a.icon {
            position: absolute; /*Абсолютное позиционирование. 
            Указывает, что элемент абсолютно позиционирован, 
            при этом другие элементы отображаются 
            на веб-странице словно 
            абсолютно позиционированного элемента и нет.
            Так как у родителя значение position задано как relative, 
            то отсчёт координат ведётся от края родительского элемента.
        */
            right: 0;
            top: 0;
        }
 
        /* адаптирование для всех ссылок*/
        .topnav.responsive a {
            float: none; /*Обтекание элемента не задаётся, для того, чтобы ссылки
            выстроились в колонку.
        */
            display: block; /*определяется браузером как блочный элемент,
           имеет разрыв строки до и после элемента и 
           занимает всю доступную ширину*/
            text-align: left; /* выравнивание по горизонтали по левому краю*/
        }
 
        /*логотип в header, отссуп сверху от внутреннего края*/
        .graficlogo{
            padding-top: 10px;
        }
 
    /* адаптация названия заголовка*/
    .headerName {
        font-size: 20px;
        padding-top: 10px;
        padding-left: 25px;
        margin-right:15px;
    }
 
 
    /*правила для отдельного элемента списка 'преимуществ'*/
    .advantages-items {
        width: 45%;
    }
}
 
/* Адаптация под экраны, шириной меньше чем  420px*/
@media screen and (max-width: 420px) {
    .advantages {
        flex-direction: column; /* задаем направление для размещения flex-элементов
            в колонку.
        */
    }
 
    .advantages-items {
        width: 100%; /*здесь указываем, что элемент блока 'преимуществ'
            в случае расположения в колонку, будет занимать 100% места
        */
    }
 
    /* уменьшим размер иконки(если добавить значение width, тогда
        изменение размера не пропорционально)
    */
    .advantages-icons {
        height: 30%;
    }
}
 
footer{
    width: 100%;
    height: auto; /*высота footer будет автоматически 
        подстраиваться под высоту элементов, расположенных в footer*/
    background:#435ceb;
    margin: 0 auto; /* означает расположение элементов - посредине*/
    text-align: center; /*добавляется для совместимости с браузером IE,
        чтобы отцентровать блок, точно посредине, и в данном случае, используется
        совметстно с  -   margin: 0 auto;
    */
    padding-top: 25px; /*отступ для внутренних элементов 
        футера - сверху от внутреннего края */
}
 
footer a{
    color: #b6ff00;
    font-size: 14px;
    margin-left: 15px;/* расстояние между ссылками*/
}
 
/* добавление для ссылок только меню*/
footer nav a:hover{
    border-bottom: 1px solid white; /*нижняя часть рамки*/
}
 
.social{
  text-align:end;
    margin-top:10px;
}
 
/* иконки соц.сетей в footer*/
.social img{
    margin-left: 10px;
    margin-bottom: 10px;
}
 
/* hover-эффект для иконок*/
.social img:hover{
    background: #ffd800;
}

*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0;
  margin: 0;
  outline: 0;
}
 
/*стили выше добавлены только для этого примера, в реальном проекте используйте normilize.css\reset.css*/
html,
body {
  width: 100%;
}
 
.footer {
  border: 2px solid #000000;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-pack: space-evenly;
  -webkit-justify-content: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
.footer > .logo {
  height: 50px;
  width: 100px;
  background: url(https://dummyimage.com/150x100/858585/000000.png&text=Logo) no-repeat center;
  -webkit-background-size: cover;
          background-size: cover;
}
.footer > nav ul {
  list-style: none;
}
.footer > nav ul > li {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  cursor: pointer;
}
.footer > .icons > img {
  margin: 0 5px;
  -webkit-border-radius: 50%;
          border-radius: 50%;
}

*, *:after, *:before {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    outline: 0;
}
 
html, body {
    width: 100%;
}
 
.footer {
    display: table;
    width: 100%;
}
 
.footer > .wrap-row {
    display: table-row;
}
 
.footer > .wrap-row > * {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    border: 2px solid #000000;
}
 
.footer > .wrap-row > .logo {
    display: table-cell;
}
 
.footer > .wrap-row > nav {
    display: table-cell;
}
 
.footer > .wrap-row > nav > ul {
    list-style: none;
}
 
.footer > .wrap-row > nav > ul > li {
    display: inline-block;
    cursor: pointer;
}
 
.footer > .wrap-row > .icons {
    display: table-cell;
}
 
.footer > .wrap-row > .icons > img {
    margin: 0 5px;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}