Не могу дотянуть последний блок до края 20/28

Vladimr_Lobochkin · 26.Май.2017 22:03:49

Помогите пожалуйста, не могу сообразить что не так делаю
html,
body {
margin: 0;
padding: 0;
}

body {
width: 430px;
min-height: 280px;
padding: 10px;
font-family: “Arial”, sans-serif;
font-size: 14px;
line-height: 1.4;
background: #ecf0f1;
}

.main-menu {
padding:0px;
margin: 10px 0 0 0;
}

.main-menu li{
display: inline-block;
margin-right: -5px;
}

.main-menu li a {
margin-top: 5px;
background: #2980b9;
padding:10px 15px;
color: #ffffff;
text-decoration: none;
border-left: 2px solid #2c3e50;
}

.main-menu .active a{
background: #1abc9c;
}

.main-menu li:last-child {
padding-right: 5px;

Ineska · 27.Май.2017 05:07:05

Vladimr_Lobochkin · 27.Май.2017 06:08:09

Подскажите пожалуйста если ставить свойство :
.main-menu li:last-child a {
padding-right: 40px;
}
то всё получается, а если менять фон у .main-menu то не получается, так же пытался через свойство :
.main-menu li:last-child {
margin-right: 5px;
background: #2980b9;
}
тоже не получается, в чем моя ошибка ?

Ineska · 27.Май.2017 06:30:32

Хотели менять фон у списка, а правило показываете для последнего пункта li.

Vladimr_Lobochkin · 27.Май.2017 10:58:13

Я имею ввиду ,что так:
.main-menu li:last-child {
margin-right: 5px;
background: #2980b9;
}
ИЛИ ТАК:
.main-menu {
background: #2980b9;
}

ничего не меняется

Ineska · 27.Май.2017 12:09:44

Второй вариант правильный.

Vladimr_Lobochkin · 27.Май.2017 12:41:10

с этим вариантом тоже не получается

Ineska · 27.Май.2017 13:52:15

Последний вариант кода полностью текстом, пожалуйста.

Vladimr_Lobochkin · 27.Май.2017 14:06:02

html,

body {
margin: 0;
padding: 0;
}

body {
width: 430px;
min-height: 280px;
padding: 10px;
font-family: “Arial”, sans-serif;
font-size: 14px;
line-height: 1.4;
background: #ecf0f1;
}

html,
body {
margin: 0;
padding: 0;
}

body {
width: 430px;
min-height: 280px;
padding: 10px;
font-family: “Arial”, sans-serif;
font-size: 14px;
line-height: 1.4;
background: #ecf0f1;
}

.main-menu {
padding:0px;
margin: 10px 0 0 0;

}

.main-menu li{
display: inline-block;
margin-right: -5px;

}

.main-menu li a {
margin-top: 5px;
background: #2980b9;
padding:10px 15px;
color: #ffffff;
text-decoration: none;
border-left: 2px solid #2c3e50;
}

.main-menu .active a{
background: #1abc9c;
}

.main-menu {
background: #2980b9;
}

Ineska · 28.Май.2017 07:49:09

Вы не сделали ссылку блочной. Все лишние отступы сверху соответственно надо убрать.

Vladimr_Lobochkin · 28.Май.2017 07:59:32

Всё получилось, огромное спасибо за помощь!