Как убрать белый фон при верстке?

Question

Armen Khachikyan @ameeenno

junior web developer

Вёрстка

Как убрать белый фон при верстке?

При responsive не могу убрать белый фон справа. Как исправить?

Вопрос задан более трёх лет назад
222 просмотра

6 комментариев

Подписаться 1 Простой 6 комментариев

Ankhena @Ankhena Куратор тега Вёрстка

Варианта 2.
Либо вы показываете свою верстку.
Либо самостоятельно по одному удаляете сначала крупные блоки и ищете виновника. Потом повторяете для его внутренних элементов.

Написано более трёх лет назад
maxim @m1rvi

Скинь верстку

Написано более трёх лет назад

Armen Khachikyan @ameeenno Автор вопроса

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
	<title>Document</title>
</head>
<body>
	<div class="header">
		<div class="container">
			<div class="head">

				<div class="menu">

					<div class="menu_logo">
						<h1 class="logo">Brandi</h1>
						<p class="i_am_your_tag_line">I’am your tag line</p>
					</div>

					<nav class="menu_nav">
						<a href="#" class="nav_link">Home</a>
						<a href="#" class="nav_link">Features</a>
						<a href="#" class="nav_link">Works</a>
						<a href="#" class="nav_link">Team</a>
						<a href="#" class="nav_link">Contact</a>
				</div>

				<div class="bg">
					
				</div>
			</div>
		</div>
	</div>
	
	
</body>
</html>
*{
	margin: 0;
	padding: 0;
}
.container {
    max-width: 1170px;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}
.header{
	background-image: url(../img/bg.png);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	min-height: 800px;
	max-width: 1366px;
    width: 100%;
}
.head{
	display: flex;
	flex-direction: column;
}
.menu{
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	min-height: 70px;
}
.menu_logo{
	display: flex;
	align-items: center;

}
.logo{
    font-size: 28px;
    font-family: "Pacifico";
    line-height: 1.2;
    color: rgb(255, 255, 255);
}


.i_am_your_tag_line {
  font-size: 16px;
  font-family: "OpenSans";
  color: #3b414d;
  line-height: 1.2;
  border-left: 1px solid rgba(50, 176, 238, 0.302);
  margin-left: 20px;
  padding-left: 20px;
}

.menu_nav{
	
}

.nav_link{
	text-decoration: none;
	color:#fff;
	margin-right: 30px;
}
.nav_link:last-child{
	margin-right: 0;
}
.nav_link:hover{
	border-top: 2px solid rgba(50, 176, 238, 0.302);
	padding-top: 23px;
}

Написано более трёх лет назад

Ankhena @Ankhena Куратор тега Вёрстка
У вас в коде

width: 100%; padding-right: 15px; padding-left: 15px;

вот на эти 30 точек и не влезает.
Используйте box-sizing: border-box.
Либо не указывайте ширину 100%, она сама подстроится.
Написано более трёх лет назад
Armen Khachikyan @ameeenno Автор вопроса

Ankhena, спасибо но дело било в самом размере где я указал min-width 1366px поменял на 1280px и все

Написано более трёх лет назад
Ankhena @Ankhena Куратор тега Вёрстка

Armen Khachikyan, отлично, особенно учитывая, что в том коде, который вы показали вообще нет min-width

Написано более трёх лет назад

Пригласить эксперта

Ваш ответ на вопрос

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

Войти через центр авторизации

Похожие вопросы

Вёрстка

Средний
Почему мобильная адаптация на ios отличается от android?
- 1 подписчик
- 14 мая
- 98 просмотров
1

ответ
JavaScript

+3 ещё

Средний
Как динамически увеличить родительский блок в зависимости от градуса поворота дочернего?
- 1 подписчик
- 11 мая
- 73 просмотра
1

ответ
Вёрстка

Простой
Giphy API как получить прямую ссылку на скачивание гифки, чтоб потом ее можно было вставить в img?
- 2 подписчика
- 10 мая
- 102 просмотра
0

ответов
Вёрстка

Простой
Как в codepen выложить свою работу и сделать ей название, чтобы по нему другие ее нашли в поиске?
- 1 подписчик
- 03 мая
- 54 просмотра
0

ответов
JavaScript

+4 ещё

Простой
Почему при загрузке страницы происходит быстрый скролл вниз, а затем вверх?
- 1 подписчик
- 30 апр.
- 131 просмотр
1

ответ
JavaScript

+4 ещё

Средний
Как сделать правильное динамическое масштабирование ion-range в зависимости от ширины колонок линии со значениями?
- 1 подписчик
- 23 апр.
- 64 просмотра
0

ответов
Вёрстка

Средний
Как правильно вставлять изображения при наличии двух тем оформления сайта?
- 1 подписчик
- 19 апр.
- 113 просмотров
2

ответа
HTML

+2 ещё

Средний
Неправильное отображение верстки во всех браузерах локально на компьютере, в чем может быть проблема?
- 1 подписчик
- 18 апр.
- 99 просмотров
1

ответ
Вёрстка

Простой
В чем может быть проблема, верстка расплывается по экрану телефона?
- 5 подписчиков
- 17 апр.
- 5191 просмотр
8

ответов
Вёрстка

Средний
Что использовать для современной автоматизации верстки?
- 1 подписчик
- 15 апр.
- 184 просмотра
1

ответ
Показать ещё Загружается…

Fullstack разработчик

indiweb • Санкт-Петербург

от 25 000 до 45 000 ₽

Frontend Developer в Pixel Point

Pixel Point

от 2 200 до 3 000 $

web разработчик

ИП Веденчук • Сочи

от 80 000 ₽

Опубликовать большое количество YouTube Shorts

19 мая 2024, в 15:56

20000 руб./за проект

Нужен верстальщик на react

19 мая 2024, в 15:24

10000 руб./за проект

Создание короткого видео превью мобильного приложения для сторов

19 мая 2024, в 15:06

10000 руб./за проект

Варианта 2.
Либо вы показываете свою верстку.
Либо самостоятельно по одному удаляете сначала крупные блоки и ищете виновника. Потом повторяете для его внутренних элементов.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous"> <link rel="stylesheet" type="text/css" href="css/style.css"> <link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet"> <title>Document</title> </head> <body> <div class="header"> <div class="container"> <div class="head"> <div class="menu"> <div class="menu_logo"> <h1 class="logo">Brandi</h1> <p class="i_am_your_tag_line">I’am your tag line</p> </div> <nav class="menu_nav"> <a href="#" class="nav_link">Home</a> <a href="#" class="nav_link">Features</a> <a href="#" class="nav_link">Works</a> <a href="#" class="nav_link">Team</a> <a href="#" class="nav_link">Contact</a> </div> <div class="bg"> </div> </div> </div> </div> </body> </html> *{ margin: 0; padding: 0; } .container { max-width: 1170px; width: 100%; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } .header{ background-image: url(../img/bg.png); background-size: cover; background-repeat: no-repeat; background-position: center; min-height: 800px; max-width: 1366px; width: 100%; } .head{ display: flex; flex-direction: column; } .menu{ display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 70px; } .menu_logo{ display: flex; align-items: center; } .logo{ font-size: 28px; font-family: "Pacifico"; line-height: 1.2; color: rgb(255, 255, 255); } .i_am_your_tag_line { font-size: 16px; font-family: "OpenSans"; color: #3b414d; line-height: 1.2; border-left: 1px solid rgba(50, 176, 238, 0.302); margin-left: 20px; padding-left: 20px; } .menu_nav{ } .nav_link{ text-decoration: none; color:#fff; margin-right: 30px; } .nav_link:last-child{ margin-right: 0; } .nav_link:hover{ border-top: 2px solid rgba(50, 176, 238, 0.302); padding-top: 23px; }
У вас в коде

width: 100%; padding-right: 15px; padding-left: 15px;

вот на эти 30 точек и не влезает.
Используйте box-sizing: border-box.
Либо не указывайте ширину 100%, она сама подстроится.
Ankhena, спасибо но дело било в самом размере где я указал min-width 1366px поменял на 1280px и все
Armen Khachikyan, отлично, особенно учитывая, что в том коде, который вы показали вообще нет min-width

Как убрать белый фон при верстке?

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

Минуточку внимания

Войдите на сайт