Антон Спирин

Используйте SCSS исходники. Их можно легко настроить и подключить только нужное.

Оператор only используется, чтобы скрыть стили от старых браузеров (поддерживающих синтаксис медиа-запросов CSS2).

@media only screen and (min-width: 401px) and (max-width: 600px) {

}

Эти браузеры ожидают список медиа-типов, разделённых запятыми. И, согласно спецификации, они должны отсекать каждое значение непосредственно перед первым неалфавитно-цифровым символом, который не является дефисом. Таким образом, старый браузер должен интерпретировать предыдущий пример как media="only". Поскольку данного типа медиа-типа не существует, то и таблицы стилей будут игнорироваться.

Уберите width: auto;
https://jsfiddle.net/urbt4L1u/

Потому что правило display для вашего компонента задается селектором css, а не является ключом собственного свойства style.

Так будет работать:

var leftMenu = document.querySelector(".left-menu");
var displayValue = window.getComputedStyle(leftMenu,null).getPropertyValue("display");
console.log(displayValue === 'none');

Можно так https://jsfiddle.net/zmhaf9Lf/

Вот вариант решения с переходом с inline на flex. https://jsfiddle.net/yggnswa5/

Вот простой вариант решения https://jsfiddle.net/rockon404/q2kpasfu/

Да никакой. Тут дело в размере. Вы можете сделать свою сборку bootstrap из scss исходников, исключив все что не собираетесь использовать. На скорость загрузки влияние минимальное.

Используйте элементы fieldset и legend
Пример https://jsfiddle.net/7bu94x90/
Для позиционирования legend относительно левого края используйте margin-left
Вообще fieldset задумывался для разделения форм на блоки, но вы вольны использовать его везде где можно использовать блочные элементы. Html будет валидным.

Вот упрощенный вариант решения без float https://jsfiddle.net/3b0gtfwg/
А отступ у вас не работает потому, что используете строчный span, float не причем.
Почитайте о разнице между строчными и блочными элементами.

Зачем вам делать чарт с нуля когда есть куча готовых настраиваемых решений?