На ноутбуке, если это Windows 10 стоит масштабирование от ОС по умолчанию (125%), получается что на мониторе 1 пиксель равен 1 физическому пикселю, а на ноутбуке нет. Разный DPI
По факту на ноутбуке вертска выглядит как для экрана с разрешением 1280x720
Вот интересно, как обоснует наличие этих линий дизайнер ? Сколько потеряет бизнес, если эти кружочки будут просто на голубом фоне ? Тем более это не связанные элементы, о отельные услуги и врайпером для них служит голобой фон. Дизайнер должен уметь верстать и точка, чтобы такую дичь не творить
Чтобы запилить сетку как на Bootstrap самому нужно понимать следующие темы CSS:
1) Блочная модель документа
2) Свойство Float
3) Методы очистки потока в CSS
ну и прочитать ЭТО
Используй то, в чем разбираешься и понимаешь как и зачем это работает. Если ты не понимаешь разницы между 3 и 4 версиями Boostrap и не понимаешь к каким последствиям может это привести я тебе советую не использовать и не 3 и не 4 , а учить css пока не поймешь что и как. Если бы ты понимал , то такой вопрос не задал бы.