Задать вопрос
@admiralov
html

Что делать сайт занимает половину экрана на компьютере, а нужно чтобы занимал весь?

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width">
    <title>Document</title>
    <link rel="stylesheet" href="/css/style.css">
</head>


spoiler
.container{
    width: 1200px;
    margin: 0 0 auto;
    font-family: Roboto;
    font-weight: 400;
   display: flex;
   flex-direction: column;
}

.main-menu ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.main-menu li {
    margin-right: 24px;
}

.main-menu a {
    text-decoration: none;
    color: black;
    font-size: 14px;
}

.main-menu {
    position: relative;
    top: -470px;
    margin-left: 120px;
}

.menu ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu li {
    margin-right: 24px;
}

.menu a {
    text-decoration: none;
    color: black;
    font-size: 14px;
}

.menu {
    position: relative;
    top: -488px;
    margin-left: 1023px;
}

.sign {
    color: white;
}

.text1 {
    font-size: 48px;
    position: relative;
    top: -430px;
    margin-left: 150px;
}

.images1 {
    height: 295px;
    width: 425px;
    position: relative;
    margin-left: 625px;
    top: -670px;
}

.search {
    position: relative;
    margin-left: 150px;
    top: -740px;
}

.lupa {
    position: relative;
    margin-left: 17px;
    top: -40px;
}

.circle {
    position: relative;
    margin-left: 376px;
    top: -74px;
}

.strela {
    position: relative;
    margin-left: 390px;
    top: -106px;
}

.shopping {
    position: relative;
    top: -630px;
    margin-left: 258px;
}

.text2 {
    position: absolute;
    font-size: 16px;
    text-align: center;
    margin-left: -100px;
}

.card {
    position: relative;
    margin-left: 570px;
    top: -680px;
}

.text3 {
    position: absolute;
    font-size: 16px;
    text-align: center;
    margin-left: -90px;
}

.bank {
    position: relative;
    margin-left: 892px;
    top: -730px;
}

.text4 {
    position: absolute;
    font-size: 16px;
    text-align: center;
    margin-left: -90px;
}

.text5 {
    font-size: 32px;
    text-align: center;
    position: relative;
    top: -560px;
}

.text6 {
    font-size: 16px;
    
}

.img1 {
    position: relative;
    margin-left: 150px;
    top: -520px;
}

.text7 {
    font-size: 16px;
}

.img2 {
    position: relative;
    margin-left: 467px;
    top: -1000px;
}

.text8 {
    font-size: 16px;
}

.img3 {
    position: relative;
    margin-left: 783px;
    top: -1480px;
}

.strelka {
    position: relative;
    margin-left: 100px ;
    top: -34px;
}

.text9 {
    color:#487B94;
    position: relative;
    margin-left: 150px;
    top: -1410px;
}

.text10 {
    color:#487B94;
    position: relative;
    margin-left: 467px;
    top: -1484px;
}

.text11 {
    color:#487B94;
    position: relative;
    margin-left: 315px;
    top: -74px;
}

.text12 {
    font-size: 20px;
    position: relative;
    top: -1500px;
    margin-left: 150px;
}

.img4 {
    position: relative;
    margin-left: 150px;
    top: -1450px;

}

.text13 {
    font-size: 16px;
}

.text14 {
    font-size: 16px;
}

.img5 {
    position: relative;
    margin-left: 626px;
    top: -1822px;
}

.text15 {
    font-size: 16px;
}

.img6 {
    position: relative;
    margin-left: 1101px;
    top: -2193px;
}

.strelka2 {
    position: relative;
    margin-left: 120px;
    top: -33px;
}

.view {
    position: relative;
    color:#487B94;
    top: -2100px;
    margin-left: 150px;
}

.klarna {
    margin-left: 150px;
    font-size: 12px;
    position: relative;
    top: -2120px;
}

.bg2 {
    position: relative;
    top: -2080px;
}

.text16 {
    margin-left: 150px;
    font-size: 16px;
    position: relative;
    top: -2560px;
    color: white;
}

.text17 {
    font-size: 48px;
    color: white;
    margin-left: 150px;
    color: white;
    position: relative;
    top: -2585px;
}

.text18 {
    font-size: 20px;
    margin-left: 150px;
    color: white;
    position: relative;
    top: -2600px;
}

.learn-more {
    width: 135px;
    height: 52px;
    background: #FFB3C7;
    border-radius: 0px;
    position: relative;
    margin-left: 150px;
    top: -2590px;
}

.klarna-card-img {
    margin-left: 625px;
    position: relative;
    top: -2995px;
}

.text19 {
    margin-left: 625px;
    color: black;
    font-size: 48px;
    position: relative;
    top: -2800px;
}

.text20 {
    margin-left: 625px;
    color: black;
    font-size: 20px;
    position: relative;
    top: -2800px;
}

.discover-trends {
    width: 166px;
    height: 50px;
    background: #17120F;
    border: 1px solid #17120F;
    border-radius: 0px;
    color: white;
    margin-left: 625px;
    position: relative;
    top: -2780px;
}

.inspired-img {
    margin-left: 150px;
    position: relative;
    top: -3120px;
}

.roses {
    margin-left: 150px;
}

.text21 {
    margin-left: 167px;
    font-size: 16px;
}

.flowers {
    position: relative;
    top: -3000px;
}

.active-wear {
    margin-left: 468px;
}

.text22 {
    margin-left: 484px;
}

.activewear {
    position: relative;
    top: -3386px;
}

.affordable-tech {
    margin-left: 784px;
}

.text23 {
    margin-left: 800px;
}

.affordabletech {
    position: relative;
    top: -3773px;
}

.shape-wear {
    margin-left: 150px;
}

.text24 {
    margin-left: 167px;
}

.shapewear {
    position: relative;
    top: -3700px;
}

.running-gear {
    margin-left: 468px;
}

.text25 {
    margin-left: 484px;
}

.runninggear {
    position: relative;
    top: -4086px;
}

.jewelry-img {
    margin-left: 784px;
}

.text26 {
    margin-left: 800px;
}

.jewelry {
    position: relative;
    top: -4470px;
}

.dresses-img {
    margin-left: 150px;
}

.text27 {
    margin-left: 167px;
}

.dresses {
    position: relative;
    top: -4400px;
}

.out-wear {
    margin-left: 468px;
}

.text28 {
    margin-left: 484px;
}

.outwear {
    position: relative;
    top: -4785px;
}

.paw-some {
    margin-left: 784px;
}

.text29 {
    margin-left: 800px;
}

.pawsome {
    position: relative;
    top: -5170px;
}
  • Вопрос задан
  • 151 просмотр
7 комментариев
Подписаться 1 Средний 7 комментариев
Пригласить эксперта
Ответы на вопрос 1
mr_jok
@mr_jok
1200 уже задали
откажитесь от px
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
CRM Bitrix24 разработчик
World Vision Clinic • Москва
от 170 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Разработать дизайн приложений
22 дек. 2024, в 19:03
60000 руб./за проект
Веб-дизайн клининговой компании
22 дек. 2024, в 17:54
10000 руб./за проект
Нарисовать UX/UI дизайн для игры. Нарисовать несколько иконок для игры
22 дек. 2024, в 17:45
10000 руб./за проект
Ещё заказы