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

Question

Armen Khachikyan @ameeenno

junior web developer

Вёрстка

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

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

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

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

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

Помогут разобраться в теме Все курсы

Нетология

Веб-разработчик с нуля: профессия с выбором специализации

14 месяцев

Далее
Skillbox

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

11 месяцев

Далее
Яндекс Практикум

Профессиональная вёрстка на HTML и CSS

3 месяца

Далее

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

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

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

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

JavaScript

+2 ещё

Простой
Элемент стилизации на js, как сделать чтобы не было резкой смены картинки фона?
- 1 подписчик
- 27 нояб.
- 215 просмотров
1

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

+2 ещё

Простой
Какие актуальные размеры сеток для дизайна?
- 1 подписчик
- 22 нояб.
- 189 просмотров
2

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

Средний
Почему появляется белая полоса справа при верстке сайта?
- 1 подписчик
- 19 окт.
- 201 просмотр
0

ответов
HTML

+1 ещё

Средний
Как правильно сочетать теги article, section и заголовки h1-h6?
- 2 подписчика
- 21 сент.
- 272 просмотра
2

ответа
HTML

+2 ещё

Простой
Что поменять/добавить чтобы отображались все подкасты (видео)?
- 1 подписчик
- 26 авг.
- 167 просмотров
1

ответ
CSS

+2 ещё

Простой
Вёрстка анимированой кнопки — как реализовать?
- 1 подписчик
- 22 авг.
- 245 просмотров
1

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

Простой
Проблема с версткой сайта?
- 1 подписчик
- 20 авг.
- 718 просмотров
2

ответа
HTML

+3 ещё

Простой
Как отменить инвертирование текста в yandex почте в dark mode?
- 2 подписчика
- 19 авг.
- 234 просмотра
1

ответ
CSS

+2 ещё

Простой
Как сделать такую сетку?
- 2 подписчика
- 28 июл.
- 2873 просмотра
2

ответа
CSS

+3 ещё

Средний
Яндекс Браузер на MacOS: как убрать или подвинуть иконку автозаполнения?
- 1 подписчик
- 25 июл.
- 135 просмотров
0

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

Fullstack Next.js Cursor Developer

Nocodered

от 60 000 до 120 000 ₽

SEO-специалист (Сеть образовательных проектов)

Профессиональный Стандарт • Москва

До 100 000 ₽

PHP / WordPress разработчик ACF, Elementor (удаленный, свободный график)

Nomadic Soft

от 1 200 до 1 800 $

Варианта 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

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

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

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

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