Размещение div в html

начал писать сайт на html и столкнулся с проблемой
Не могу никакими способами сделать так, чтобы меню(слова "Главная""Политика" и тд) была выравненная по левому краю, а точнее, чтобы она была по левому краю от нашего фиксированного контейнера, то есть чтобы было как с лого "Новостное агенство" и с надписью "Самые свежие новости"
А также не могу добавить слэш между данными элементами Должно в итоге получиться как на конечной картинке(фото прилагаю).
Первая картинка это то, что получилось у меня, а вторая как должно быть

html,
body {
  margin: 0;
  padding: 0;
  min-width: 1000px;
  font-family: Arial;
}

h2 {
  font-size: 20px;
  padding: 27px 0 27px 18px;
  margin: 0 0 34px;
  border-bottom: 1px solid #e5e5e5;
}

#black-bar {
  background-color: #000066;
  color: white;
  padding: 20px 0;
  font-size: 16px;
}

#black-bar a {
  color: white;
}

.fixed-container {
  width: 960px;
  margin: 0 auto;
  position: relative;
}

#datetime {
  float: right;
}

#header {
  height: 100px;
}

#logo {
  position: absolute;
  top: 40px;
}

#menu-container {
  height: 70px;
}

#find {
  float: right;
  margin-top: 40px;
}

#weather {
  position: relative;
  left: 68%;
  top: 40px;
}

.menu1 {
  position: relative;
  float: left;
  top: 40px;
  width: 100px;
  text-align: center;
}

.MenuLeft {}
<div id="black-bar">
  <div class="fixed-container">
    Самые <a href="#">свежие новости</a> в реальном времени
    <div id="datetime">12:30 19.06.2018</div>
  </div>
</div>
<div id="header">
  <div class="fixed-container">
    <img id="logo" src="logo.png">
  </div>
  <div class="fixed-container">
    <input id="find" type="type" name="findtext" placeholder="Поиск по сайту">
  </div>
  <div class="fixed-container">
    <img id="weather" src="weather.png">
  </div>
</div>
<div id="menu-container" class="MenuLeft">
  <div class="fixed-container">
    <div class="menu1">Главная</div>
  </div>
  <div class="fixed-container">
    <div class="menu1">Политика</div>
  </div>
  <div class="fixed-container">
    <div class="menu1">Общество</div>
  </div>
  <div class="fixed-container">
    <div class="menu1">Экономика</div>
  </div>
  <div class="fixed-container">
    <div class="menu1">В мире</div>
  </div>
  <div class="fixed-container">
    <div class="menu1">События</div>
  </div>
  <div class="fixed-container">
    <div class="menu1">Спорт</div>
  </div>
  <div class="fixed-container">
    <div class="menu1">Наука</div>
  </div>
  <div class="fixed-container">
    <div class="menu1">Туризм</div>
  </div>
</div>

Мой вариант

Конечный вариант


Ответы (1 шт):

Автор решения: AlexVolkov

Чтобы выравнять блок с разделами по левому краю просто убери свойство text-align: center у .menu1.


Реализации "/" между названиями разделов я не увидел, своей предлагать не могу, так как у меня очень садистские вкусы)))


Надеюсь, я хорошо ответил на твой вопрос.

→ Ссылка