В тексте нету отступа

Рейтинг: 1Ответов: 1Опубликовано: 22.01.2023

Мне надо было сделать некоторые слова жёлтым цветом, и я реши использовать span и заменить цветвведите сюда описание изображения, но теперь текст "сливается", как можно исправить?

* {
    user-select: none;
}

body {
    margin: 0;
    font-family: 'Open Sans', sans-serif;
}

.container {
    margin: 0px 166px;
}
.header {
    background-image: url(imgs/bg.png);
    height: 100vh;
    background-repeat: no-repeat;
    background-size: cover;
}

.header_line
{
    padding-top: 50px;
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.nav_item {
    color: #FFF;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 17px;

    margin-right: 25px;
    transition: color 0.3s linear;
}
.nav_item:hover {
    color: #FF7400;
}
.cart {
    position: relative;

    border-right: 1px solid #FFFFFF;
    padding-right: 10px;
    height: 50px;
}
.cart-img {
    position: absolute;
    top: 18px;
    right: 21px;
}
.num {
    color: #fff;
    text-decoration: none;
    font-weight: 700;

    transition: color 0.2s linear;
}

.num:hover {
    color: #FF7400;
}
.phone_text {
    font-size: 14px;
    font-weight: 400;
    color: #fff;
}
.phone_holder {
    display: flex;
    align-items: center;
}
.button {
    background-color: #FF7400;
    text-decoration: none;
    color: #fff;
    padding: 14px 17px;
    font-weight: 700;
    border-radius: 5px;

    transition: color 0.2s linear, background-color 0.2s linear;
}
.button:hover {
    color: black;
    background-color: #c75a00;
}

.header_down {
    position: relative;

}
.header_title {
    color: #D67E35;
    font-family: 'Tinos', serif;
    font-weight: 400;
    font-size: 50px;
    position: absolute;
    left: 0;

    text-align: center;
    margin-top: 225px;
    margin-bottom: 12px;
}
.header_suptitle {
    color: #fff;
    font-size: 18px;
    font-family: 'Open Sans', sans-serif;
}

.header_suptitle::after {
    position: absolute;
    content: "";
    height: 2px;
    width: 61px;
    background-color: #fff;

    top: 127px;
    left: 56px;
}
.header_suptitle::before {
    position: absolute;
    content: "";
    height: 2px;
    width: 61px;
    background-color: #fff;

    top: 127px;
    left: 308px;
}
.header_button {
    background-color: #FF7400;
    padding: 14px 28px;
    color: #FFF;
    font-size: 14px;
    font-weight: 700;
    font-family: 'Open Sans', sans-serif;
    text-decoration: none;
    border-radius: 2px;

    transition: color 0.2s linear, background-color 0.2s linear, border-radius 0.2s linear;
}

.header_button:hover {
    color: black;
    background-color: #c75a00;
    border-radius: 5px;
}


/* Cards */

.card {
    width: 349px;
    box-shadow: 10px 10px 40px 20px #0000001A;
    margin-right: 31px;
    background-color: #FFF;
    margin-top: -80px;
    padding: 40px 20px;
    height: 328px;
}


.card_image {
    display: flex;
    justify-content: center;
    padding-top: 31px;
}
.card_title {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 26px;
    
}
.card_title span {
    color: #f5c339;
    
}
.card_desc {
    display: flex;
    text-align: center;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 26px;
    color: #656363;
}
.card_holder {
    display: flex;
    justify-content: center;
}

.history_title {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 54px;
    text-align: center;
    width: 444px;
    margin-top: 21px;
    font-weight: 700;
}

.history_title span {
    color: #D67E35;
}
.history_desc {
    color: #656363;
    font-size: 16px;
    text-align: center;
    width: 444px;
    margin-top: 10px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
}
.history {
    margin-top: 166px;
    padding-bottom: 200px;
}
.history_number {
    display: flex;
    width: 444px;
    justify-content: center;
    margin-top: 40px;

    margin-left: 30px;
}
.number_item {
    margin-right: 60px;
    text-align: center;
    font-size: 40px;
    color: #BC9060;
}
.number_item span {
    display: block;
    color: #000;
    font-size: 20px;
}
.history_holder {
    display: flex;
    justify-content: space-between;
}
.history_images {
    position: relative;
}
.images1 {
    position: absolute;
    z-index: 0;
    top: -63px;
    left: -210px;
}
.images2 {
    position: absolute;
    z-index: 999;
    top: 157px;
    left: 129px;
}
.history_images {
    right: 170px;
    top: -50px;
}
.history_info {
    margin-left: 130px;
    margin-left: 250px;
}


.black_block {
    background-image: url(imgs/black_bg.jpg);
    padding: 110px 0;
}
.left_title {
    color: #D67E34;
    font-family: 'Open Sans', sans-serif;
    font-size: 52px;
    font-weight: 700;

    margin: 20px;
}

.left_text {
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 24px;
    color: #FFF;
    margin-left: 25px;
}
.right_btn {
    background-color: #FF7400;
    text-decoration: none;
    color: #fff;
    padding: 14px 17px;
    font-weight: 700;
    border-radius: 5px;

    transition: color 0.2s linear, background-color 0.2s linear;
}

.right_btn:hover {
    color: black;
    background-color: #c75a00;
    border-radius: 5px;
}
.block_holder {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dishes_title {
    font-size: 54px;
    font-weight: 700;
    text-align: center;
    padding-top: 132px;
    margin-bottom: 139px;
    font-family: 'Open Sans', sans-serif;
}
.dishes_title span {
    color: #D67E34;
}
.burgers {
    display: flex;
    justify-content: center;
}
.burger_item {
    display: flex;
    align-items: center;
    margin-bottom: 29px;
}
.burgers_image {
    margin-right:  20px;
}
.burger_text {
    font-family: 'Open Sans', sans-serif;
    font-size: 26px;
    margin-left: 20px;
    font-weight: 700;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="icon" href="icon.ico">
    <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=Open+Sans:wght@300;400;500;600;700;800&display=swap" 
    rel="stylesheet">
    <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=Tinos:wght@400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Restaurant</title>
</head>
<body>
    <div class="header">
        <div class="container">
            <div class="header_line">
                <div class="header_logo">
                    <a href="index.html">
                    <img src="imgs/LOGO.png">
                    </a>
                </div>

                <div class="nav">
                    <a class="nav_item" href="#">Главная</a>
                    <a class="nav_item" href="#">Меню</a>
                    <a class="nav_item" href="#">О Нас</a>
                    <a class="nav_item" href="#">Бронь</a>
                </div>
                <div class="cart">
                    <a href="#">
                        <img class="cart-img" src="imgs/cart.png">
                    </a>
                </div>

                <div class="phone">
                    <div class="phone_holder">
                        <div class="phone_img">
                            <img src="imgs/phone.png" alt="">
                        </div>
                            <div class="number"><a class="num" href="#">+999-888-76-54</a>
                        </div>
                    </div>
                    <div class="phone_text"> 
                        Свяжитесь с нами для <br> бронирования
                    </div>
                </div>

                <div class="btn">
                    <a class="button" href="#">ЗАКАЗАТЬ СТОЛИК</a>
                </div>
            </div>

            <div class="header_down">
                <div class="header_title">
                    Добро пожаловать в

                    <div class="header_subtitle">
                        Наш ресторан
                    </div>

                    <div class="header_suptitle">
                        ДОМ ЛУЧШЕЙ ЕДЫ
                    </div>

                    <div class="header_btn">
                        <a href="#" class="header_button">ПОСМОТРЕТЬ МЕНЮ</a>
                    </div>
                </div>

            </div>
            
        </div>

    </div>
    <div class="cards">
        <div class="container">

            <div class="card_holder">
                    
                <div class="card">

                    <div class="card_image">
                        <img class="card_img" src="imgs/card.png">
                    </div>

                    <div class="card_title">
                        Магическая <span>Атмосфера</span>
                    </div>

                    <div class="card_desc">
                        В нашем заведении царит магическая атмосфера
                        наполненная вкусными ароматами
                    </div>
        
                </div>

                <div class="card">

                    <div class="card_image">
                        <img class="card_img" src="imgs/card.png">
                    </div>

                    <div class="card_title">
                        Лучшее качество <span>Еды</span>
                    </div>

                    <div class="card_desc">
                        Качество нашей 
                        Еды - отменное!
                    </div>
        
                </div>

                <div class="card">

                    <div class="card_image">
                        <img class="card_img" src="imgs/card.png">
                    </div>

                    <div class="card_title">
                        Недорогая <span>Еда</span>
                    </div>

                    <div class="card_desc">
                        Стоимость нашей Еды
                        зависит только от ее
                        количества. Качество
                        всегда на высоте!
                    </div>
        
                </div>

            </div>
        </div>

    </div>

    <div class="history">
        
                <div class="container">

                <div class="history_holder">
                    <div class="history_info">
                        <div class="history_title">
                            Наша <span>История</span>
                        </div>
                        <div class="history_desc">
                            Как и у любого другого самобытного места, у нас есть своя, особая история. Идея ресторана пришла основателям неожиданно. Во время прогулки по лесу создатель нашего ресторана застрял в сотнях километров от ближайшего населенного пункта. Вдали от цивилизации и связи им пришлось навремя обустровать себе нехитрый быт, добывать и готовить себе еду.
                        </div>

                        <div class="history_number">
                            <div class="number_item">
                                93 <span>Напитки</span>
                            </div>
                            <div class="number_item">
                                206 <span>Еда</span>
                            </div>
                            <div class="number_item">
                                71 <span>Закуски</span>
                            </div>
                        </div>
                    </div>

                    <div class="history_images">
                        <img class="images1" src="imgs/1.png" alt="">
                        <img class="images2" src="imgs/2.png" alt="">
                        <img class="images3" src="imgs/3.png" alt="">
                    </div>
                </div>

            </div>
        </div>


        <div class="black_block">
            <div class="container">

                <div class="block_holder">
                    <div class="left">
                        <div class="left_title">
                            Отпразднуйте в одном из <br>
                            самых лучших ресторанов.
                        </div>

                        <div class="left_text">
                            Только в этом месяце бизнес-ланч от 250 ₽
                        </div>
                    </div>
                    <div class="right">
                        <div class="right_button">
                            <a href="#" class="right_btn">ЗАКАЗ СТОЛИКА</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    <div class="dishes">
        <div class="container">

            <div class="dishes_title">
                Наши <span>Блюда</span>
            </div>

            <div class="burgers">
                    <div class="burgers_image">
                        <img src="imgs/pizza.jpg" class="pizza" alt="">
                    </div>
                

                <div class="burgers_item">
                    <div class="burger_item">
                        <img src="imgs/hamburger.jpg" alt="">
                        <div class="burger_text">Гамбургер мини ------------------ 220 ₽</div>
                    </div>
                    <div class="burger_item">
                        <img src="imgs/hamburger.jpg" alt="">
                        <div class="burger_text">Гамбургер мини ------------------ 220 ₽</div>
                    </div>
                    <div class="burger_item">
                        <img src="imgs/hamburger.jpg" alt="">
                        <div class="burger_text">Гамбургер мини ------------------ 220 ₽</div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</body>
</html>

css html
Источник: Stack Overflow на русском

Ответы

▲ 0Принят

Можно добавить отступов слева, для єлементов.

* {
  user-select: none;
}

body {
  margin: 0;
  font-family: 'Open Sans', sans-serif;
}

.container {
  margin: 0px 166px;
}

.header {
  background-image: url(imgs/bg.png);
  height: 100vh;
  background-repeat: no-repeat;
  background-size: cover;
}

.header_line {
  padding-top: 50px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.nav_item {
  color: #FFF;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 17px;

  margin-right: 25px;
  transition: color 0.3s linear;
}

.nav_item:hover {
  color: #FF7400;
}

.cart {
  position: relative;

  border-right: 1px solid #FFFFFF;
  padding-right: 10px;
  height: 50px;
}

.cart-img {
  position: absolute;
  top: 18px;
  right: 21px;
}

.num {
  color: #fff;
  text-decoration: none;
  font-weight: 700;

  transition: color 0.2s linear;
}

.num:hover {
  color: #FF7400;
}

.phone_text {
  font-size: 14px;
  font-weight: 400;
  color: #fff;
}

.phone_holder {
  display: flex;
  align-items: center;
}

.button {
  background-color: #FF7400;
  text-decoration: none;
  color: #fff;
  padding: 14px 17px;
  font-weight: 700;
  border-radius: 5px;

  transition: color 0.2s linear, background-color 0.2s linear;
}

.button:hover {
  color: black;
  background-color: #c75a00;
}

.header_down {
  position: relative;

}

.header_title {
  color: #D67E35;
  font-family: 'Tinos', serif;
  font-weight: 400;
  font-size: 50px;
  position: absolute;
  left: 0;

  text-align: center;
  margin-top: 225px;
  margin-bottom: 12px;
}

.header_suptitle {
  color: #fff;
  font-size: 18px;
  font-family: 'Open Sans', sans-serif;
}

.header_suptitle::after {
  position: absolute;
  content: "";
  height: 2px;
  width: 61px;
  background-color: #fff;

  top: 127px;
  left: 56px;
}

.header_suptitle::before {
  position: absolute;
  content: "";
  height: 2px;
  width: 61px;
  background-color: #fff;

  top: 127px;
  left: 308px;
}

.header_button {
  background-color: #FF7400;
  padding: 14px 28px;
  color: #FFF;
  font-size: 14px;
  font-weight: 700;
  font-family: 'Open Sans', sans-serif;
  text-decoration: none;
  border-radius: 2px;

  transition: color 0.2s linear, background-color 0.2s linear, border-radius 0.2s linear;
}

.header_button:hover {
  color: black;
  background-color: #c75a00;
  border-radius: 5px;
}


/* Cards */

.card {
  width: 349px;
  box-shadow: 10px 10px 40px 20px #0000001A;
  margin-right: 31px;
  background-color: #FFF;
  margin-top: -80px;
  padding: 40px 20px;
  height: 328px;
}


.card_image {
  display: flex;
  justify-content: center;
  padding-top: 31px;
}

.card_title {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: 26px;

}

.card_title span {
  color: #f5c339;
  margin-left: 5px;
}

.card_desc {
  display: flex;
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: 26px;
  color: #656363;
}

.card_holder {
  display: flex;
  justify-content: center;
}

.history_title {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-size: 54px;
  text-align: center;
  width: 444px;
  margin-top: 21px;
  font-weight: 700;
}

.history_title span {
  color: #D67E35;
}

.history_desc {
  color: #656363;
  font-size: 16px;
  text-align: center;
  width: 444px;
  margin-top: 10px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
}

.history {
  margin-top: 166px;
  padding-bottom: 200px;
}

.history_number {
  display: flex;
  width: 444px;
  justify-content: center;
  margin-top: 40px;

  margin-left: 30px;
}

.number_item {
  margin-right: 60px;
  text-align: center;
  font-size: 40px;
  color: #BC9060;
}

.number_item span {
  display: block;
  color: #000;
  font-size: 20px;
}

.history_holder {
  display: flex;
  justify-content: space-between;
}

.history_images {
  position: relative;
}

.images1 {
  position: absolute;
  z-index: 0;
  top: -63px;
  left: -210px;
}

.images2 {
  position: absolute;
  z-index: 999;
  top: 157px;
  left: 129px;
}

.history_images {
  right: 170px;
  top: -50px;
}

.history_info {
  margin-left: 130px;
  margin-left: 250px;
}


.black_block {
  background-image: url(imgs/black_bg.jpg);
  padding: 110px 0;
}

.left_title {
  color: #D67E34;
  font-family: 'Open Sans', sans-serif;
  font-size: 52px;
  font-weight: 700;

  margin: 20px;
}

.left_text {
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: 24px;
  color: #FFF;
  margin-left: 25px;
}

.right_btn {
  background-color: #FF7400;
  text-decoration: none;
  color: #fff;
  padding: 14px 17px;
  font-weight: 700;
  border-radius: 5px;

  transition: color 0.2s linear, background-color 0.2s linear;
}

.right_btn:hover {
  color: black;
  background-color: #c75a00;
  border-radius: 5px;
}

.block_holder {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dishes_title {
  font-size: 54px;
  font-weight: 700;
  text-align: center;
  padding-top: 132px;
  margin-bottom: 139px;
  font-family: 'Open Sans', sans-serif;
}

.dishes_title span {
  color: #D67E34;
}

.burgers {
  display: flex;
  justify-content: center;
}

.burger_item {
  display: flex;
  align-items: center;
  margin-bottom: 29px;
}

.burgers_image {
  margin-right: 20px;
}

.burger_text {
  font-family: 'Open Sans', sans-serif;
  font-size: 26px;
  margin-left: 20px;
  font-weight: 700;
}
 <div class="header">
   <div class="container">
     <div class="header_line">
       <div class="header_logo">
         <a href="index.html">
           <img src="imgs/LOGO.png">
         </a>
       </div>

       <div class="nav">
         <a class="nav_item" href="#">Главная</a>
         <a class="nav_item" href="#">Меню</a>
         <a class="nav_item" href="#">О Нас</a>
         <a class="nav_item" href="#">Бронь</a>
       </div>
       <div class="cart">
         <a href="#">
           <img class="cart-img" src="imgs/cart.png">
         </a>
       </div>

       <div class="phone">
         <div class="phone_holder">
           <div class="phone_img">
             <img src="imgs/phone.png" alt="">
           </div>
           <div class="number"><a class="num" href="#">+999-888-76-54</a>
           </div>
         </div>
         <div class="phone_text">
           Свяжитесь с нами для <br> бронирования
         </div>
       </div>

       <div class="btn">
         <a class="button" href="#">ЗАКАЗАТЬ СТОЛИК</a>
       </div>
     </div>

     <div class="header_down">
       <div class="header_title">
         Добро пожаловать в

         <div class="header_subtitle">
           Наш ресторан
         </div>

         <div class="header_suptitle">
           ДОМ ЛУЧШЕЙ ЕДЫ
         </div>

         <div class="header_btn">
           <a href="#" class="header_button">ПОСМОТРЕТЬ МЕНЮ</a>
         </div>
       </div>

     </div>

   </div>

 </div>
 <div class="cards">
   <div class="container">

     <div class="card_holder">

       <div class="card">

         <div class="card_image">
           <img class="card_img" src="imgs/card.png">
         </div>

         <p class="card_title">
           Магическая <span>Атмосфера</span>
         </p>

         <div class="card_desc">
           В нашем заведении царит магическая атмосфера
           наполненная вкусными ароматами
         </div>

       </div>

       <div class="card">

         <div class="card_image">
           <img class="card_img" src="imgs/card.png">
         </div>

         <p class="card_title">
           Лучшее качество <span>Еды</span>
         </p>

         <div class="card_desc">
           Качество нашей
           Еды - отменное!
         </div>

       </div>

       <div class="card">

         <div class="card_image">
           <img class="card_img" src="imgs/card.png">
         </div>

         <p class="card_title">
           Недорогая <span>Еда</span>
         </p>

         <div class="card_desc">
           Стоимость нашей Еды
           зависит только от ее
           количества. Качество
           всегда на высоте!
         </div>

       </div>

     </div>
   </div>

 </div>

 <div class="history">

   <div class="container">

     <div class="history_holder">
       <div class="history_info">
         <div class="history_title">
           Наша <span>История</span>
         </div>
         <div class="history_desc">
           Как и у любого другого самобытного места, у нас есть своя, особая история. Идея ресторана пришла основателям неожиданно. Во время прогулки по лесу создатель нашего ресторана застрял в сотнях километров от ближайшего населенного пункта. Вдали от цивилизации и связи им пришлось навремя обустровать себе нехитрый быт, добывать и готовить себе еду.
         </div>

         <div class="history_number">
           <div class="number_item">
             93 <span>Напитки</span>
           </div>
           <div class="number_item">
             206 <span>Еда</span>
           </div>
           <div class="number_item">
             71 <span>Закуски</span>
           </div>
         </div>
       </div>

       <div class="history_images">
         <img class="images1" src="imgs/1.png" alt="">
         <img class="images2" src="imgs/2.png" alt="">
         <img class="images3" src="imgs/3.png" alt="">
       </div>
     </div>

   </div>
 </div>


 <div class="black_block">
   <div class="container">

     <div class="block_holder">
       <div class="left">
         <div class="left_title">
           Отпразднуйте в одном из <br>
           самых лучших ресторанов.
         </div>

         <div class="left_text">
           Только в этом месяце бизнес-ланч от 250 ₽
         </div>
       </div>
       <div class="right">
         <div class="right_button">
           <a href="#" class="right_btn">ЗАКАЗ СТОЛИКА</a>
         </div>
       </div>
     </div>
   </div>
 </div>

 <div class="dishes">
   <div class="container">

     <div class="dishes_title">
       Наши <span>Блюда</span>
     </div>

     <div class="burgers">
       <div class="burgers_image">
         <img src="imgs/pizza.jpg" class="pizza" alt="">
       </div>


       <div class="burgers_item">
         <div class="burger_item">
           <img src="imgs/hamburger.jpg" alt="">
           <div class="burger_text">Гамбургер мини ------------------ 220 ₽</div>
         </div>
         <div class="burger_item">
           <img src="imgs/hamburger.jpg" alt="">
           <div class="burger_text">Гамбургер мини ------------------ 220 ₽</div>
         </div>
         <div class="burger_item">
           <img src="imgs/hamburger.jpg" alt="">
           <div class="burger_text">Гамбургер мини ------------------ 220 ₽</div>
         </div>
       </div>
     </div>

   </div>
 </div>