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

Question

Armen Khachikyan @ameeenno

junior web developer

Вёрстка

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

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

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

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

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

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

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

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

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

CSS

+1 ещё

Простой
Как сделать обтекание одного блока другим CSS?
- 1 подписчик
- 01 дек.
- 122 просмотра
0

ответов
HTML

+3 ещё

Простой
Как правильно сделать наложение блоков друг на друга?
- 1 подписчик
- 30 нояб.
- 112 просмотров
1

ответ
HTML

+3 ещё

Простой
Почему появляется горизонтальная прокрутка на мобильном (overflow включен)?
- 1 подписчик
- 26 нояб.
- 105 просмотров
1

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

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

ответ
Веб-разработка

+2 ещё

Простой
Что нужно знать веб-дизайнеру о вёрстке, чтобы адекватно коммуницировать с разработчиком сайта / верстальщиком?
- 1 подписчик
- 06 нояб.
- 567 просмотров
4

ответа
CSS

+2 ещё

Простой
Как исправить не корректное изменение свойства display css?
- 1 подписчик
- 25 окт.
- 91 просмотр
1

ответ
CSS

+1 ещё

Простой
Как сделать пропорциональное масшабирование блока?
- 1 подписчик
- 25 окт.
- 139 просмотров
1

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

Средний
Что за баг с дублированием контента?
- 1 подписчик
- 23 окт.
- 107 просмотров
1

ответ
CSS

+2 ещё

Средний
Как реализовать такой эффект CSS?
- 1 подписчик
- 15 окт.
- 248 просмотров
1

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

Простой
Как создать такой эффект вокруг фото?
- 1 подписчик
- 10 окт.
- 142 просмотра
1

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

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

TravelLine

До 70 000 ₽

Преподаватель курсов программирования

CODDY • Москва

от 25 000 до 50 000 ₽

Fullstack на Wordpress

SilverDuck

от 100 000 ₽

Доработать функционал сайта

18 дек. 2024, в 20:59

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

Веб сервис для печатной мастерской (php+laravel+mysql)

18 дек. 2024, в 19:48

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

Настройка и ведение Яндекс Директа

18 дек. 2024, в 18:23

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

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

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

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

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

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