Как убрать ненужное расстояние справа страницы

Question

Нужно убрать вот это расстояние

Я пробовал убирать position:absloute и это помогало только тогда кнопки располагались где-то посредине сайта (не понял почему - объясните и этот момент - мол почему не слева вверху картинки)

Код который я использую (вставьте себе в редактор кода и попробуйте убрать это расстояние - тут в браузере при запуске кода это расстояние не видно)

HTML

body {
    background-color: #090909;
    margin: 0;
    margin-left: 5%;
    margin-right: 5%;
}

header {
    background-color: #141414;
    box-shadow: -5px 5px 5px 5px #000000;
    height: 100px;
    display: flex;
    justify-content: center;
    font-size: 24px;
    margin: 0;
}



.about_person {
    margin: 0;
    margin-top: 2%;
}

.person_title {

}


.personName {
    font-size: 32px;
    font-family: Arial;
    color: #282828;
    margin: 0;
}

.personNickname {
    font-size: 20px;
    color: purple;
    margin: 0;
}




.person_info {
    display: flex;
    justify-content: center;
    margin-top: 1%;
}

.personImg {
    max-width: 60%
    width:100%;
    max-height:500px;
    height:100%;
}

.person_description {
    max-width: 40%
    width: 100%;
    margin: 0;
    margin-left: 1%;
    color: #505050;
    font-size: 24px;
}

.person_description h3 {
    margin: 0;
    margin-bottom: 2%;
}

.person_description p {
    margin: 0;
    margin-bottom: 1%;
}

.person_links {
    position: absolute;
    margin-top: 0.5%;
    margin-left: 80%;
    max-width: 40%;
    width: 100%;
    display: inline-block;
}

.person_links a {

    padding: 8px 16px;
    color:white;
    text-decoration: none;
    margin-left: 3%;
    background-color: #7E00B5;
    border-radius: 12px;
    font-size: 14px;

}


.person_links a:hover {
    background-color: #7100A2;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MyFirstSite_copy_4_4</title>
    <link rel="stylesheet" href="style.css">
</head>


<body>

    <header>
        <h2>Professional cs:go players</h2>
    </header>


    <div class="about_person">

        <div class="person_title">
            <h2 class="personName">Alexandr Kostylev</h2>
            <p class="personNickname">s1mple</p>
        </div>

        <div class="person_info">

            <img class="personImg" src="https://liquipedia.net/commons/images/thumb/4/41/S1mple_at_Antwerp_Major_2022_EU_RMR.jpg/600px-S1mple_at_Antwerp_Major_2022_EU_RMR.jpg" alt="">

            <div class="person_description">
                <h3>About s1mple:</h3>
                <p>s1mple is a steamer and top1 HLTV and also he is the most popular cs:go player in the world</p>
                <p>Age: 25 years</p>
                <p>Team: Natus Vincere</p>
                <p>Role: AWP</p>

                

            </div>

            <div class="person_links">
                <a href="https://www.hltv.org/stats/players/7998/s1mple">HLTV</a>
                <a href="https://www.youtube.com/channel/UCLyVaqx9Pezekijg0IF7NYA">YouTube</a>
                <a href="https://steamcommunity.com/id/officials1mple/">Steam</a>
            </div>
            

        </div>

    </div>



    <div class="cellar">
        MyFirstSite_copy_4_4: 23.02.2023 - 23.02.2023
    </div>


</body>




</html>

Answer 1

Оберните весь контент в <div class="wrapper"></div> и добавьте стили, которие будут обрезать(скрывать) контент который вылазит с области видимости. Что-то по типу .wrapper{position:relative; max-width:100wv; overflow:hidden;}

Answer 2

Вот сделал, и пара советов, не используйте margin для отступов по ширине - это для вас окончится плачевно.
Не используйте position: absolute; без особой нужды.
Научитесь пользоваться display: flex; - пара примеров уже в решённой задачке есть, постарайтесь понять как я использую flex для отступов, позиционирования, почему если gap: 10px;, то у дочерних двух элементов width: calc(50% - 5px);
Ну и научитесь правильно оборачивать элементы, так проще будет использовать flex. Например Заголовок и кнопки ссылки находятся на одном уровне, вы сразу думаете нужно их в общую обёртку и задать display: flex;, потом смотрите Заголовок стоит слева, а кнопки справа - ставите justify-content: space-between;, потом смотрите заголовок равняется на нижнюю часть кнопок - ставите align-items: flex-end;, потом смотрите нужно, что бы когда не хватает ширины для расположения заголовка и кнопок в одну строку кнопки переходили на следующую строку - ставите flex-wrap: wrap;
P.S. Отображение на этом сайте не похоже на ваше, так как тут окно меньше и как видите кнопки как раз из-за нехватки места спустились вниз, но если вы запустите у себя, они будут стоять как на макете у вас.

body {
    background-color: #090909;
    margin: 0;
    margin-left: 5%;
    margin-right: 5%;
}

header {
    background-color: #141414;
    box-shadow: -5px 5px 5px 5px #000000;
    height: 100px;
    display: flex;
    justify-content: center;
    font-size: 24px;
    margin: 0;
}



.about_person {
    margin: 0;
    margin-top: 2%;
}

.person_title {

}


.personName {
    font-size: 32px;
    font-family: Arial;
    color: #282828;
    margin: 0;
}

.personNickname {
    font-size: 20px;
    color: purple;
    margin: 0;
}




.person_info {
    display: flex;
    margin-top: 1%;
    gap:10px;
}

.personImg {
    width: calc(50% - 5px);
    max-height:500px;
    height:100%;
}

.title__wrapper {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 20px;
}

.person_description {
    width: calc(50% - 5px);
    margin: 0;
    color: #505050;
    font-size: 24px;
}

.person_description h3 {
    margin: 0;
    white-space: nowrap;
}

.person_description p {
    margin: 0;
    margin-bottom: 1%;
}

.person_links {
    display: flex;
    justify-content: flex-end;
    gap: 15px;
}

.person_links a {

    padding: 8px 16px;
    color:white;
    text-decoration: none;
    background-color: #7E00B5;
    border-radius: 12px;
    font-size: 14px;

}


.person_links a:hover {
    background-color: #7100A2;
}

<body>
  <header>
      <h2>Professional cs:go players</h2>
  </header>
    <div class="about_person">
      <div class="person_title">
          <h2 class="personName">Alexandr Kostylev</h2>
          <p class="personNickname">s1mple</p>
      </div>
      <div class="person_info">
        <img class="personImg" src="https://liquipedia.net/commons/images/thumb/4/41/S1mple_at_Antwerp_Major_2022_EU_RMR.jpg/600px-S1mple_at_Antwerp_Major_2022_EU_RMR.jpg" alt="">
          <div class="person_description">
              <div class="title__wrapper">
                <h3>About s1mple:</h3>
                <div class="person_links">
                    <a href="https://www.hltv.org/stats/players/7998/s1mple">HLTV</a>
                    <a href="https://www.youtube.com/channel/UCLyVaqx9Pezekijg0IF7NYA">YouTube</a>
                    <a href="https://steamcommunity.com/id/officials1mple/">Steam</a>
                </div>
              </div>
              <p>s1mple is a steamer and top1 HLTV and also he is the most popular cs:go player in the world</p>
              <p>Age: 25 years</p>
              <p>Team: Natus Vincere</p>
              <p>Role: AWP</p>
            </div>
        </div>
    </div>
    <div class="cellar">
        MyFirstSite_copy_4_4: 23.02.2023 - 23.02.2023
    </div>
</body>

БЛОГ НА HUSL

Как убрать ненужное расстояние справа страницы

Ответы (2 шт):