i was constructing my website and i have been searching for a way to move my svg button all the way to the right of the div
(kind of like a justify-content:flex-end but in a row, but the flex-direction is set to column so i can't do that, and align-self doesn't work either).
i tried many things and can't seem to make it work. I really have no idea what to do, i hope i am not the only one facing this problem
Thanks for helping.
Here is the html and the css :
first-line{
display:flex;
flex-direction: row;
justify-content:center;
flex-wrap: wrap;
width:100%;
overflow: visible;
grid-row: 3;
grid-column: 2 / 4;
margin-left: auto;
background-color: #2a2d38;
border:solid white 2px;
}
.first-line a{
width:0;
}
.find_players_wrapper {
position: relative;
display:flex;
flex-direction:column;
text-align: right;
background-color:#2a2d38;
overflow: visible;
border:solid blue 2px;
height:100%;
}
.find_players_wrapper p2 {
margin-left:auto;
}
.start_button {
}
svg {
overflow: visible;
width: 6vw;
}
.follow_games_wrapper p2 {
text-align:left;
} <!--the first line is the parent-->
<div class=first-line>
<div class=follow_games_wrapper>
<h2>Follow games</h2>
<p2 class=center_text>Find and subscribe to games you like, to make joining a team easier !</p2>
<a href="C:\Users\Vincent\Desktop\Website\N1\Games.html">
<svg class="games_button" width="159" height="74" viewBox="0 0 60 81" preserveAspectRatio="xMinYMin meet" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Group 1">
<path class="Black_button" d="M0 53.3279V0H36.8502L55.7247 2.99595L86.2834 0H137.514L158.186 19.4737V74H91.0769L75.7976 67.4089L58.8704 74H26.664L0 53.3279Z" fill="black"/>
<path id="Red_button" d="M0 53.3279V0H36.8502L55.7247 2.99595L86.2834 0H137.514L158.186 19.4737V74H91.0769L75.7976 67.4089L58.8704 74H26.664L0 53.3279Z" fill="#017B67"/>
<g id="GAMES">
<path d="M46.0723 43.3633C45.2812 44.2422 44.124 44.9502 42.6006 45.4873C41.0771 46.0244 39.4072 46.293 37.5908 46.293C34.7979 46.293 32.5664 45.4385 30.8965 43.7295C29.2266 42.0205 28.333 39.6426 28.2158 36.5957L28.2012 34.75C28.2012 32.6504 28.5723 30.8193 29.3145 29.2568C30.0566 27.6846 31.1162 26.4785 32.4932 25.6387C33.8799 24.7891 35.4814 24.3643 37.2979 24.3643C39.9541 24.3643 42.0146 24.9746 43.4795 26.1953C44.9541 27.4062 45.8135 29.2178 46.0576 31.6299H41.1064C40.9307 30.4385 40.5498 29.5889 39.9639 29.0811C39.3779 28.5732 38.5479 28.3193 37.4736 28.3193C36.1846 28.3193 35.1885 28.8662 34.4854 29.96C33.7822 31.0537 33.4258 32.6162 33.416 34.6475V35.9365C33.416 38.0654 33.7773 39.667 34.5 40.7412C35.2324 41.8057 36.3799 42.3379 37.9424 42.3379C39.2803 42.3379 40.2764 42.04 40.9307 41.4443V38.1338H37.3564V34.6035H46.0723V43.3633Z" fill="white"/>
<path d="M61.1748 42.0156H54.1289L52.8984 46H47.4053L55.2275 24.6719H60.0615L67.9424 46H62.4199L61.1748 42.0156ZM55.3594 38.0459H59.9443L57.6445 30.6484L55.3594 38.0459Z" fill="white"/>
<path d="M76.2627 24.6719L81.0234 39.5107L85.7695 24.6719H92.5371V46H87.3809V41.0195L87.8789 30.8242L82.7227 46H79.3242L74.1533 30.8096L74.6514 41.0195V46H69.5098V24.6719H76.2627Z" fill="white"/>
<path d="M109.046 36.9619H100.96V42.0449H110.511V46H95.8184V24.6719H110.54V28.6416H100.96V33.1387H109.046V36.9619Z" fill="white"/>
<path d="M123.606 40.3311C123.606 39.5791 123.338 38.9932 122.801 38.5732C122.273 38.1533 121.341 37.7188 120.003 37.2695C118.665 36.8203 117.571 36.3857 116.722 35.9658C113.958 34.6084 112.576 32.7432 112.576 30.3701C112.576 29.1885 112.918 28.1484 113.602 27.25C114.295 26.3418 115.271 25.6387 116.531 25.1406C117.791 24.6328 119.207 24.3789 120.779 24.3789C122.312 24.3789 123.685 24.6523 124.896 25.1992C126.116 25.7461 127.063 26.5273 127.737 27.543C128.411 28.5488 128.748 29.7012 128.748 31H123.621C123.621 30.1309 123.353 29.457 122.815 28.9785C122.288 28.5 121.57 28.2607 120.662 28.2607C119.744 28.2607 119.017 28.4658 118.479 28.876C117.952 29.2764 117.688 29.7891 117.688 30.4141C117.688 30.9609 117.981 31.459 118.567 31.9082C119.153 32.3477 120.184 32.8066 121.658 33.2852C123.133 33.7539 124.344 34.2617 125.291 34.8086C127.596 36.1367 128.748 37.9678 128.748 40.3018C128.748 42.167 128.045 43.6318 126.639 44.6963C125.232 45.7607 123.304 46.293 120.853 46.293C119.124 46.293 117.557 45.9854 116.15 45.3701C114.754 44.7451 113.699 43.8955 112.986 42.8213C112.283 41.7373 111.932 40.4922 111.932 39.0859H117.088C117.088 40.2285 117.381 41.0732 117.967 41.6201C118.562 42.1572 119.524 42.4258 120.853 42.4258C121.702 42.4258 122.371 42.2451 122.859 41.8838C123.357 41.5127 123.606 40.9951 123.606 40.3311Z" fill="white"/>
</g>
</g>
</svg>
</div>
</a>
<!-- this is the wrapper containing the button and text -->
<div class=find_players_wrapper>
<h2>Find players</h2>
<p2>Log in and look for other players linked to the games you play !</p2>
<a href=C:\Users\Vincent\Desktop\Website\N1\sp.html>
<svg class="start_button" width="159" height="74" viewBox="0 0 60 81" preserveAspectRatio="xMinYMin meet" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Group 1">
<path class="Black_button" d="M0 53.3279V0H36.8502L55.7247 2.99595L86.2834 0H137.514L158.186 19.4737V74H91.0769L75.7976 67.4089L58.8704 74H26.664L0 53.3279Z" fill="black"/>
<path id="Red_button_2" d="M0 53.3279V0H36.8502L55.7247 2.99595L86.2834 0H137.514L158.186 19.4737V74H91.0769L75.7976 67.4089L58.8704 74H26.664L0 53.3279Z" fill="#017B67"/>
<g id="START">
<path d="M44.6123 40.3311C44.6123 39.5791 44.3438 38.9932 43.8066 38.5732C43.2793 38.1533 42.3467 37.7188 41.0088 37.2695C39.6709 36.8203 38.5771 36.3857 37.7275 35.9658C34.9639 34.6084 33.582 32.7432 33.582 30.3701C33.582 29.1885 33.9238 28.1484 34.6074 27.25C35.3008 26.3418 36.2773 25.6387 37.5371 25.1406C38.7969 24.6328 40.2129 24.3789 41.7852 24.3789C43.3184 24.3789 44.6904 24.6523 45.9014 25.1992C47.1221 25.7461 48.0693 26.5273 48.7432 27.543C49.417 28.5488 49.7539 29.7012 49.7539 31H44.627C44.627 30.1309 44.3584 29.457 43.8213 28.9785C43.2939 28.5 42.5762 28.2607 41.668 28.2607C40.75 28.2607 40.0225 28.4658 39.4854 28.876C38.958 29.2764 38.6943 29.7891 38.6943 30.4141C38.6943 30.9609 38.9873 31.459 39.5732 31.9082C40.1592 32.3477 41.1895 32.8066 42.6641 33.2852C44.1387 33.7539 45.3496 34.2617 46.2969 34.8086C48.6016 36.1367 49.7539 37.9678 49.7539 40.3018C49.7539 42.167 49.0508 43.6318 47.6445 44.6963C46.2383 45.7607 44.3096 46.293 41.8584 46.293C40.1299 46.293 38.5625 45.9854 37.1562 45.3701C35.7598 44.7451 34.7051 43.8955 33.9922 42.8213C33.2891 41.7373 32.9375 40.4922 32.9375 39.0859H38.0938C38.0938 40.2285 38.3867 41.0732 38.9727 41.6201C39.5684 42.1572 40.5303 42.4258 41.8584 42.4258C42.708 42.4258 43.377 42.2451 43.8652 41.8838C44.3633 41.5127 44.6123 40.9951 44.6123 40.3311Z" fill="white"/>
<path d="M69.1338 28.6416H62.7324V46H57.5908V28.6416H51.3066V24.6719H69.1338V28.6416Z" fill="white"/>
<path d="M81.6729 42.0156H74.627L73.3965 46H67.9033L75.7256 24.6719H80.5596L88.4404 46H82.918L81.6729 42.0156ZM75.8574 38.0459H80.4424L78.1426 30.6484L75.8574 38.0459Z" fill="white"/>
<path d="M97.9326 38.4707H95.1494V46H90.0078V24.6719H98.4014C100.931 24.6719 102.908 25.2334 104.334 26.3564C105.76 27.4795 106.473 29.0664 106.473 31.1172C106.473 32.6016 106.17 33.832 105.564 34.8086C104.969 35.7852 104.031 36.5762 102.752 37.1816L107.205 45.7803V46H101.697L97.9326 38.4707ZM95.1494 34.501H98.4014C99.3779 34.501 100.11 34.2471 100.599 33.7393C101.097 33.2217 101.346 32.5039 101.346 31.5859C101.346 30.668 101.097 29.9502 100.599 29.4326C100.101 28.9053 99.3682 28.6416 98.4014 28.6416H95.1494V34.501Z" fill="white"/>
<path d="M125.589 28.6416H119.188V46H114.046V28.6416H107.762V24.6719H125.589V28.6416Z" fill="white"/>
</g>
</g>
</svg>
</a>
</div>
</div>
CodePudding user response：
You can use margin-left: auto; on the <a> element (parent of your svg) to "push" it to the right.
first-line{
display:flex;
flex-direction: row;
justify-content:center;
flex-wrap: wrap;
width:100%;
overflow: visible;
grid-row: 3;
grid-column: 2 / 4;
margin-left: auto;
background-color: #2a2d38;
border:solid white 2px;
}
.first-line a{
width:0;
}
.find_players_wrapper {
position: relative;
display:flex;
flex-direction:column;
text-align: right;
background-color:#2a2d38;
overflow: visible;
border:solid blue 2px;
height:100%;
}
.find_players_wrapper p2 {
margin-left:auto;
}
.start_button {
}
svg {
overflow: visible;
}
.follow_games_wrapper p2 {
text-align:left;
}
/* Added code */
.find_players_wrapper a {
margin-left: auto;
width: 156px;
}<!--the first line is the parent-->
<div class=first-line>
<div class=follow_games_wrapper>
<h2>Follow games</h2>
<p2 class=center_text>Find and subscribe to games you like, to make joining a team easier !</p2>
<a href="C:\Users\Vincent\Desktop\Website\N1\Games.html">
<svg class="games_button" width="159" height="74" viewBox="0 0 60 81" preserveAspectRatio="xMinYMin meet" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Group 1">
<path class="Black_button" d="M0 53.3279V0H36.8502L55.7247 2.99595L86.2834 0H137.514L158.186 19.4737V74H91.0769L75.7976 67.4089L58.8704 74H26.664L0 53.3279Z" fill="black"/>
<path id="Red_button" d="M0 53.3279V0H36.8502L55.7247 2.99595L86.2834 0H137.514L158.186 19.4737V74H91.0769L75.7976 67.4089L58.8704 74H26.664L0 53.3279Z" fill="#017B67"/>
<g id="GAMES">
<path d="M46.0723 43.3633C45.2812 44.2422 44.124 44.9502 42.6006 45.4873C41.0771 46.0244 39.4072 46.293 37.5908 46.293C34.7979 46.293 32.5664 45.4385 30.8965 43.7295C29.2266 42.0205 28.333 39.6426 28.2158 36.5957L28.2012 34.75C28.2012 32.6504 28.5723 30.8193 29.3145 29.2568C30.0566 27.6846 31.1162 26.4785 32.4932 25.6387C33.8799 24.7891 35.4814 24.3643 37.2979 24.3643C39.9541 24.3643 42.0146 24.9746 43.4795 26.1953C44.9541 27.4062 45.8135 29.2178 46.0576 31.6299H41.1064C40.9307 30.4385 40.5498 29.5889 39.9639 29.0811C39.3779 28.5732 38.5479 28.3193 37.4736 28.3193C36.1846 28.3193 35.1885 28.8662 34.4854 29.96C33.7822 31.0537 33.4258 32.6162 33.416 34.6475V35.9365C33.416 38.0654 33.7773 39.667 34.5 40.7412C35.2324 41.8057 36.3799 42.3379 37.9424 42.3379C39.2803 42.3379 40.2764 42.04 40.9307 41.4443V38.1338H37.3564V34.6035H46.0723V43.3633Z" fill="white"/>
<path d="M61.1748 42.0156H54.1289L52.8984 46H47.4053L55.2275 24.6719H60.0615L67.9424 46H62.4199L61.1748 42.0156ZM55.3594 38.0459H59.9443L57.6445 30.6484L55.3594 38.0459Z" fill="white"/>
<path d="M76.2627 24.6719L81.0234 39.5107L85.7695 24.6719H92.5371V46H87.3809V41.0195L87.8789 30.8242L82.7227 46H79.3242L74.1533 30.8096L74.6514 41.0195V46H69.5098V24.6719H76.2627Z" fill="white"/>
<path d="M109.046 36.9619H100.96V42.0449H110.511V46H95.8184V24.6719H110.54V28.6416H100.96V33.1387H109.046V36.9619Z" fill="white"/>
<path d="M123.606 40.3311C123.606 39.5791 123.338 38.9932 122.801 38.5732C122.273 38.1533 121.341 37.7188 120.003 37.2695C118.665 36.8203 117.571 36.3857 116.722 35.9658C113.958 34.6084 112.576 32.7432 112.576 30.3701C112.576 29.1885 112.918 28.1484 113.602 27.25C114.295 26.3418 115.271 25.6387 116.531 25.1406C117.791 24.6328 119.207 24.3789 120.779 24.3789C122.312 24.3789 123.685 24.6523 124.896 25.1992C126.116 25.7461 127.063 26.5273 127.737 27.543C128.411 28.5488 128.748 29.7012 128.748 31H123.621C123.621 30.1309 123.353 29.457 122.815 28.9785C122.288 28.5 121.57 28.2607 120.662 28.2607C119.744 28.2607 119.017 28.4658 118.479 28.876C117.952 29.2764 117.688 29.7891 117.688 30.4141C117.688 30.9609 117.981 31.459 118.567 31.9082C119.153 32.3477 120.184 32.8066 121.658 33.2852C123.133 33.7539 124.344 34.2617 125.291 34.8086C127.596 36.1367 128.748 37.9678 128.748 40.3018C128.748 42.167 128.045 43.6318 126.639 44.6963C125.232 45.7607 123.304 46.293 120.853 46.293C119.124 46.293 117.557 45.9854 116.15 45.3701C114.754 44.7451 113.699 43.8955 112.986 42.8213C112.283 41.7373 111.932 40.4922 111.932 39.0859H117.088C117.088 40.2285 117.381 41.0732 117.967 41.6201C118.562 42.1572 119.524 42.4258 120.853 42.4258C121.702 42.4258 122.371 42.2451 122.859 41.8838C123.357 41.5127 123.606 40.9951 123.606 40.3311Z" fill="white"/>
</g>
</g>
</svg>
</div>
</a>
<!-- this is the wrapper containing the button and text -->
<div class=find_players_wrapper>
<h2>Find players</h2>
<p2>Log in and look for other players linked to the games you play !</p2>
<a href=C:\Users\Vincent\Desktop\Website\N1\sp.html>
<svg class="start_button" width="159" height="74" viewBox="0 0 60 81" preserveAspectRatio="xMinYMin meet" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Group 1">
<path class="Black_button" d="M0 53.3279V0H36.8502L55.7247 2.99595L86.2834 0H137.514L158.186 19.4737V74H91.0769L75.7976 67.4089L58.8704 74H26.664L0 53.3279Z" fill="black"/>
<path id="Red_button_2" d="M0 53.3279V0H36.8502L55.7247 2.99595L86.2834 0H137.514L158.186 19.4737V74H91.0769L75.7976 67.4089L58.8704 74H26.664L0 53.3279Z" fill="#017B67"/>
<g id="START">
<path d="M44.6123 40.3311C44.6123 39.5791 44.3438 38.9932 43.8066 38.5732C43.2793 38.1533 42.3467 37.7188 41.0088 37.2695C39.6709 36.8203 38.5771 36.3857 37.7275 35.9658C34.9639 34.6084 33.582 32.7432 33.582 30.3701C33.582 29.1885 33.9238 28.1484 34.6074 27.25C35.3008 26.3418 36.2773 25.6387 37.5371 25.1406C38.7969 24.6328 40.2129 24.3789 41.7852 24.3789C43.3184 24.3789 44.6904 24.6523 45.9014 25.1992C47.1221 25.7461 48.0693 26.5273 48.7432 27.543C49.417 28.5488 49.7539 29.7012 49.7539 31H44.627C44.627 30.1309 44.3584 29.457 43.8213 28.9785C43.2939 28.5 42.5762 28.2607 41.668 28.2607C40.75 28.2607 40.0225 28.4658 39.4854 28.876C38.958 29.2764 38.6943 29.7891 38.6943 30.4141C38.6943 30.9609 38.9873 31.459 39.5732 31.9082C40.1592 32.3477 41.1895 32.8066 42.6641 33.2852C44.1387 33.7539 45.3496 34.2617 46.2969 34.8086C48.6016 36.1367 49.7539 37.9678 49.7539 40.3018C49.7539 42.167 49.0508 43.6318 47.6445 44.6963C46.2383 45.7607 44.3096 46.293 41.8584 46.293C40.1299 46.293 38.5625 45.9854 37.1562 45.3701C35.7598 44.7451 34.7051 43.8955 33.9922 42.8213C33.2891 41.7373 32.9375 40.4922 32.9375 39.0859H38.0938C38.0938 40.2285 38.3867 41.0732 38.9727 41.6201C39.5684 42.1572 40.5303 42.4258 41.8584 42.4258C42.708 42.4258 43.377 42.2451 43.8652 41.8838C44.3633 41.5127 44.6123 40.9951 44.6123 40.3311Z" fill="white"/>
<path d="M69.1338 28.6416H62.7324V46H57.5908V28.6416H51.3066V24.6719H69.1338V28.6416Z" fill="white"/>
<path d="M81.6729 42.0156H74.627L73.3965 46H67.9033L75.7256 24.6719H80.5596L88.4404 46H82.918L81.6729 42.0156ZM75.8574 38.0459H80.4424L78.1426 30.6484L75.8574 38.0459Z" fill="white"/>
<path d="M97.9326 38.4707H95.1494V46H90.0078V24.6719H98.4014C100.931 24.6719 102.908 25.2334 104.334 26.3564C105.76 27.4795 106.473 29.0664 106.473 31.1172C106.473 32.6016 106.17 33.832 105.564 34.8086C104.969 35.7852 104.031 36.5762 102.752 37.1816L107.205 45.7803V46H101.697L97.9326 38.4707ZM95.1494 34.501H98.4014C99.3779 34.501 100.11 34.2471 100.599 33.7393C101.097 33.2217 101.346 32.5039 101.346 31.5859C101.346 30.668 101.097 29.9502 100.599 29.4326C100.101 28.9053 99.3682 28.6416 98.4014 28.6416H95.1494V34.501Z" fill="white"/>
<path d="M125.589 28.6416H119.188V46H114.046V28.6416H107.762V24.6719H125.589V28.6416Z" fill="white"/>
</g>
</g>
</svg>
</a>
</div>
</div>CodePudding user response：
I make some changes in your code mainly in CSS. I hope this is exactly what you want.
.first-line {
display: flex;
flex-direction: column;
justify-content:center;
align-items:center;
}
.follow_games_wrapper{
background:#cccccc;
margin:10px;
padding:20px;
}
.follow_games_wrapper a{
display:flex;
justify-content:flex-end;
}
.find_players_wrapper{
background:#cccccc;
margin:10px;
padding:20px;
}
.find_players_wrapper a{
display:flex;
justify-content:flex-end;
}<div class=first-line>
<div class=follow_games_wrapper>
<h2>Follow games</h2>
<p class=center_text>Find and subscribe to games you like, to make joining a team easier !</p>
<a href="C:\Users\Vincent\Desktop\Website\N1\Games.html">
<svg class="games_button" width="159" height="74" viewBox="0 0 60 81" preserveAspectRatio="xMinYMin meet" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Group 1">
<path class="Black_button" d="M0 53.3279V0H36.8502L55.7247 2.99595L86.2834 0H137.514L158.186 19.4737V74H91.0769L75.7976 67.4089L58.8704 74H26.664L0 53.3279Z" fill="black" />
<path id="Red_button" d="M0 53.3279V0H36.8502L55.7247 2.99595L86.2834 0H137.514L158.186 19.4737V74H91.0769L75.7976 67.4089L58.8704 74H26.664L0 53.3279Z" fill="#017B67" />
<g id="GAMES">
<path d="M46.0723 43.3633C45.2812 44.2422 44.124 44.9502 42.6006 45.4873C41.0771 46.0244 39.4072 46.293 37.5908 46.293C34.7979 46.293 32.5664 45.4385 30.8965 43.7295C29.2266 42.0205 28.333 39.6426 28.2158 36.5957L28.2012 34.75C28.2012 32.6504 28.5723 30.8193 29.3145 29.2568C30.0566 27.6846 31.1162 26.4785 32.4932 25.6387C33.8799 24.7891 35.4814 24.3643 37.2979 24.3643C39.9541 24.3643 42.0146 24.9746 43.4795 26.1953C44.9541 27.4062 45.8135 29.2178 46.0576 31.6299H41.1064C40.9307 30.4385 40.5498 29.5889 39.9639 29.0811C39.3779 28.5732 38.5479 28.3193 37.4736 28.3193C36.1846 28.3193 35.1885 28.8662 34.4854 29.96C33.7822 31.0537 33.4258 32.6162 33.416 34.6475V35.9365C33.416 38.0654 33.7773 39.667 34.5 40.7412C35.2324 41.8057 36.3799 42.3379 37.9424 42.3379C39.2803 42.3379 40.2764 42.04 40.9307 41.4443V38.1338H37.3564V34.6035H46.0723V43.3633Z" fill="white" />
<path d="M61.1748 42.0156H54.1289L52.8984 46H47.4053L55.2275 24.6719H60.0615L67.9424 46H62.4199L61.1748 42.0156ZM55.3594 38.0459H59.9443L57.6445 30.6484L55.3594 38.0459Z" fill="white" />
<path d="M76.2627 24.6719L81.0234 39.5107L85.7695 24.6719H92.5371V46H87.3809V41.0195L87.8789 30.8242L82.7227 46H79.3242L74.1533 30.8096L74.6514 41.0195V46H69.5098V24.6719H76.2627Z" fill="white" />
<path d="M109.046 36.9619H100.96V42.0449H110.511V46H95.8184V24.6719H110.54V28.6416H100.96V33.1387H109.046V36.9619Z" fill="white" />
<path d="M123.606 40.3311C123.606 39.5791 123.338 38.9932 122.801 38.5732C122.273 38.1533 121.341 37.7188 120.003 37.2695C118.665 36.8203 117.571 36.3857 116.722 35.9658C113.958 34.6084 112.576 32.7432 112.576 30.3701C112.576 29.1885 112.918 28.1484 113.602 27.25C114.295 26.3418 115.271 25.6387 116.531 25.1406C117.791 24.6328 119.207 24.3789 120.779 24.3789C122.312 24.3789 123.685 24.6523 124.896 25.1992C126.116 25.7461 127.063 26.5273 127.737 27.543C128.411 28.5488 128.748 29.7012 128.748 31H123.621C123.621 30.1309 123.353 29.457 122.815 28.9785C122.288 28.5 121.57 28.2607 120.662 28.2607C119.744 28.2607 119.017 28.4658 118.479 28.876C117.952 29.2764 117.688 29.7891 117.688 30.4141C117.688 30.9609 117.981 31.459 118.567 31.9082C119.153 32.3477 120.184 32.8066 121.658 33.2852C123.133 33.7539 124.344 34.2617 125.291 34.8086C127.596 36.1367 128.748 37.9678 128.748 40.3018C128.748 42.167 128.045 43.6318 126.639 44.6963C125.232 45.7607 123.304 46.293 120.853 46.293C119.124 46.293 117.557 45.9854 116.15 45.3701C114.754 44.7451 113.699 43.8955 112.986 42.8213C112.283 41.7373 111.932 40.4922 111.932 39.0859H117.088C117.088 40.2285 117.381 41.0732 117.967 41.6201C118.562 42.1572 119.524 42.4258 120.853 42.4258C121.702 42.4258 122.371 42.2451 122.859 41.8838C123.357 41.5127 123.606 40.9951 123.606 40.3311Z" fill="white" />
</g>
</g>
</svg>
</a>
</div>
<!-- this is the wrapper containing the button and text -->
<div class=find_players_wrapper>
<h2>Find players</h2>
<p>Log in and look for other players linked to the games you play !</p>
<a href=C:\Users\Vincent\Desktop\Website\N1\sp.html>
<svg class="start_button" width="159" height="74" viewBox="0 0 60 81" preserveAspectRatio="xMinYMin meet" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Group 1">
<path class="Black_button" d="M0 53.3279V0H36.8502L55.7247 2.99595L86.2834 0H137.514L158.186 19.4737V74H91.0769L75.7976 67.4089L58.8704 74H26.664L0 53.3279Z" fill="black" />
<path id="Red_button_2" d="M0 53.3279V0H36.8502L55.7247 2.99595L86.2834 0H137.514L158.186 19.4737V74H91.0769L75.7976 67.4089L58.8704 74H26.664L0 53.3279Z" fill="#017B67" />
<g id="START">
<path d="M44.6123 40.3311C44.6123 39.5791 44.3438 38.9932 43.8066 38.5732C43.2793 38.1533 42.3467 37.7188 41.0088 37.2695C39.6709 36.8203 38.5771 36.3857 37.7275 35.9658C34.9639 34.6084 33.582 32.7432 33.582 30.3701C33.582 29.1885 33.9238 28.1484 34.6074 27.25C35.3008 26.3418 36.2773 25.6387 37.5371 25.1406C38.7969 24.6328 40.2129 24.3789 41.7852 24.3789C43.3184 24.3789 44.6904 24.6523 45.9014 25.1992C47.1221 25.7461 48.0693 26.5273 48.7432 27.543C49.417 28.5488 49.7539 29.7012 49.7539 31H44.627C44.627 30.1309 44.3584 29.457 43.8213 28.9785C43.2939 28.5 42.5762 28.2607 41.668 28.2607C40.75 28.2607 40.0225 28.4658 39.4854 28.876C38.958 29.2764 38.6943 29.7891 38.6943 30.4141C38.6943 30.9609 38.9873 31.459 39.5732 31.9082C40.1592 32.3477 41.1895 32.8066 42.6641 33.2852C44.1387 33.7539 45.3496 34.2617 46.2969 34.8086C48.6016 36.1367 49.7539 37.9678 49.7539 40.3018C49.7539 42.167 49.0508 43.6318 47.6445 44.6963C46.2383 45.7607 44.3096 46.293 41.8584 46.293C40.1299 46.293 38.5625 45.9854 37.1562 45.3701C35.7598 44.7451 34.7051 43.8955 33.9922 42.8213C33.2891 41.7373 32.9375 40.4922 32.9375 39.0859H38.0938C38.0938 40.2285 38.3867 41.0732 38.9727 41.6201C39.5684 42.1572 40.5303 42.4258 41.8584 42.4258C42.708 42.4258 43.377 42.2451 43.8652 41.8838C44.3633 41.5127 44.6123 40.9951 44.6123 40.3311Z" fill="white" />
<path d="M69.1338 28.6416H62.7324V46H57.5908V28.6416H51.3066V24.6719H69.1338V28.6416Z" fill="white" />
<path d="M81.6729 42.0156H74.627L73.3965 46H67.9033L75.7256 24.6719H80.5596L88.4404 46H82.918L81.6729 42.0156ZM75.8574 38.0459H80.4424L78.1426 30.6484L75.8574 38.0459Z" fill="white" />
<path d="M97.9326 38.4707H95.1494V46H90.0078V24.6719H98.4014C100.931 24.6719 102.908 25.2334 104.334 26.3564C105.76 27.4795 106.473 29.0664 106.473 31.1172C106.473 32.6016 106.17 33.832 105.564 34.8086C104.969 35.7852 104.031 36.5762 102.752 37.1816L107.205 45.7803V46H101.697L97.9326 38.4707ZM95.1494 34.501H98.4014C99.3779 34.501 100.11 34.2471 100.599 33.7393C101.097 33.2217 101.346 32.5039 101.346 31.5859C101.346 30.668 101.097 29.9502 100.599 29.4326C100.101 28.9053 99.3682 28.6416 98.4014 28.6416H95.1494V34.501Z" fill="white" />
<path d="M125.589 28.6416H119.188V46H114.046V28.6416H107.762V24.6719H125.589V28.6416Z" fill="white" />
</g>
</g>
</svg>
</a>
</div>
</div>CodePudding user response：
Your HTML has multiple syntax errors, and your css has redundant attributes etc. So for example your whole first-line class isn't being applied and the output will be unexpected until the the markup errors are corrected. Since I'm not sure if it's exactly what you're after as it's hard to visualize unless you want to provide an example, but here's a reference example to help you get in some better habits with semantics and WCAG compliance.
/*
* {
outline: red 1px dotted;
}
*/
.container {
background-color: #2a2d38;
margin: 2px;
padding: .5rem;
}
.container h2, h3 {
margin: 0;
}
.common-btn {
height: 4rem;
width: 8rem;
margin-top: 1rem;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-weight: 600;
font-size: 1.5rem;
font-family: Arial;
text-align: center;
text-decoration: none;
background-repeat: no-repeat;
background-position: center right;
background-size: cover;
background-image: url("data:image/svg xml,");
}
.block-right {
margin-left: auto;
}
.text-right {
text-align: right;
}<article class="container">
<h2>Follow Games</h2>
<h3>Find and subscribe to games you like, to make joining a team easier !</h3>
<a class="common-btn"
href="C:\Users\Vincent\Desktop\Website\N1\Games.html">
GAMES
</a>
</article>
<article class="container text-right">
<h2>Find Players</h2>
<h3>Log in and look for other players linked to the games you play !</h3>
<a class="common-btn block-right"
href="C:\Users\Vincent\Desktop\Website\N1\sp.html">
START
</a>
</article>