WoodyAndBuzz
@WoodyAndBuzz

Как разместить блоки по краям?

Как разместить блоки чтобы не было границы справа?
627f9eeccb721199483427.png
const Products = () => {
    return <div className={style.Products} >
                <div className={style.Products__wrapper}>
                    <h1 className={style.name}>Our Porular Product</h1>
                    <div className={style.page}>
                        <p className={style.page__text}>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy</p>
                        <div className={style.link__block}>  
                            <a className={style.link} href="">Discover Our Products </a>
                            <img className={style.vector} src={vector} alt="" />
                        </div>
                    </div>
                    <div className={style.aside}>
                        <div className={style.page__content}>
                            <img className={style.img__cream} src={pump} alt="" />
                            
                                <h2 className={style.head}>Cosmetic products</h2>
                                <p className={style.text}>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy</p>
                                <div className={style.page__price}>
                                    <a href='' className={style.buttons}>Buy Now</a>
                                    <a href='' className={style.buttons}>Add To Cart</a>
                                    <p className={style.price}>$120</p>
                                </div>
                            
                        </div>
                        <div className={style.page__content}>
                            <img src={cream} alt="" />
                            
                                <h2 className={style.head}>Cosmetic products</h2>
                                <p className={style.text}>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy</p>
                                <div className={style.page__price}>
                                    <a href='' className={style.buttons}>Buy Now</a>
                                    <a href='' className={style.buttons}>Add To Cart</a>
                                    <p className={style.price}>$120</p>
                                </div>
                        </div>
                    </div>
                    
                </div>
            </div>
}

export default Products


.body{
    margin: 0 auto;
    padding: 0;
}

.Products{

}


.Products__wrapper{
    margin-left: 6.9%;
    margin-right: 7.2%;
}

.name{
    font-family: 'Red Hat Display';
    font-weight: 500;
    font-size: 56px;
    line-height: 70px;
}

.page{
   display: flex;
   justify-content: space-between;
   padding-top: 20px;
}

.page__text{
    Font-family: 'Red Hat Display';
    font-weight: 400;
    Font-size: 20px;
    line-height: 32px;
    width: 79.3%;
    width: 56.4%;
}

.link__block{
    display: flex;
    height: 100%;
}

.link{
    font-family: 'Red Hat Display';
    font-style: normal;
    font-weight: 500;
    font-size: 24px;
    line-height: 30px;
    color: #222222;
    text-decoration: none;
    border-bottom: 1px solid #222222;
}

.vector{
    padding-left: 10px;
}

.aside{
    display: flex;
    justify-content: space-between;
    margin-right: 7.2%;
}

.page__content{
    height: 812px;
    width: 41.6%;
}

.img__cream{
    height: 484px;
}

.head{
    font-family: 'Red Hat Display';
    font-weight: 500;
    font-size: 40px;
    line-height: 60px;
}

.text{
    font-family: 'Red Hat Display';
    font-weight: 400;
    font-size: 20px;
    line-height: 32px;
    color: #555555;
}
  • Вопрос задан
  • 82 просмотра
Пригласить эксперта
Ваш ответ на вопрос

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

Похожие вопросы
20 нояб. 2024, в 18:14
5000 руб./за проект
20 нояб. 2024, в 17:49
5000 руб./за проект
20 нояб. 2024, в 17:34
20000 руб./за проект