Как с помощью флекс версии поставить объект по центру в визуал студио код

Чтобы поставить flex-объект слева, у родительского блока укажи:

.container {
  display: flex;
  justify-content: flex-start;
}

Пример:

<div class="container">
  <div class="object">Объект</div>
</div>

.container {
  display: flex;
  justify-content: flex-start; /* прижимает объект влево */
}

.object {
  width: 150px;
  height: 100px;
  background: lightblue;
}

Если у тебя было:

justify-content: center;

замени на:

justify-content: flex-start;

Если элементы расположены вертикально через flex-direction: column, используй:

.container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

Чтобы поставить flex-объект вправо, у родительского блока используй:

.container {
  display: flex;
  justify-content: flex-end;
}

Пример:

<div class="container">
  <div class="object">Объект</div>
</div>

.container {
  display: flex;
  justify-content: flex-end; /* выравнивание вправо */
}

Если используется вертикальное направление:

.container {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

Чтобы блоки стояли рядом по горизонтали, задай родительскому элементу:

.container {
  display: flex;
  flex-direction: row; /* расположение слева направо */
  gap: 20px;           /* расстояние между блоками */
}

Пример:

<div class="container">
  <div class="box">Блок 1</div>
  <div class="box">Блок 2</div>
  <div class="box">Блок 3</div>
</div>

.container {
  display: flex;
  flex-direction: row;
  gap: 20px;
}

.box {
  width: 150px;
  height: 100px;
  background-color: lightblue;
  border: 1px solid blue;
}

flex-direction: row можно не писать, потому что это направление используется по умолчанию.

Чтобы распределить блоки по всей ширине:

.container {
  display: flex;
  justify-content: space-between;
}

Если речь о ширине содержимого сайта, задай её через width или max-width:

<div class="container">
  Содержимое сайта
</div>

.container {
  width: 100%;
  max-width: 1200px; /* максимальная ширина */
  margin: 0 auto;    /* выравнивание по центру */
  padding: 20px;
  box-sizing: border-box;
}

Так сайт будет занимать всю доступную ширину, но не станет шире 1200px.

Если нужна строго определённая ширина:

.container {
  width: 1000px;
  margin: 0 auto;
}

Для правильного отображения на телефонах добавь в <head>:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

CSS задаёт ширину содержимого, но не может принудительно изменить размер окна браузера.

Если ты хочешь, чтобы содержимое сайта имело определённую ширину, задай её в CSS:

body {
  margin: 0;
}

.site {
  width: 1200px;
  margin: 0 auto; /* по центру */
}

<div class="site">
  Содержимое сайта
</div>

Но изменить размер самого окна браузера с помощью HTML и CSS нельзя — браузер запрещает сайтам делать это. Можно задать только ширину страницы или её содержимого.

Для адаптивного сайта лучше использовать:

.site {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  box-sizing: border-box;
}

Если ты имеешь в виду размер самого окна браузера, то обычными HTML и CSS задать его нельзя: размер окна устанавливает пользователь или браузер.

Для проверки сайта при определённой ширине в VS Code:

1. Открой сайт в браузере.
2. Нажми F12.
3. Включи режим устройства — значок телефона или Ctrl + Shift + M.
4. Введи нужную ширину, например 1200px.

А ширину содержимого сайта можно ограничить так:

body {
  margin: 0;
  min-width: 1000px;
}

Но на телефонах появится горизонтальная прокрутка. Лучше использовать адаптивный вариант:

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}