.content { justify-content: center; } .pointer { align-items: center; justify-content: center; display: flex; height: 100%; width: 10%; max-width: 150px; } .p_left { margin: 5px; height: 70%; width: 100%; clip-path: polygon(100% 0%, 50% 48%, 100% 100%, 50% 100%, 0% 50%, 50% 0); background-color: #ff7f00; } .p_right { margin: 5px; height: 70%; width: 100%; background-color: #ff7f00; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0% 100%, 50% 50%, 0% 0%); } .content_wrapper { width: 70%; height: 100%; display: flex; flex-direction: column; } .header { width: 100%; display: flex; justify-content: space-between; font-size: 2em; font-weight: bolder; } .help_content_1 { display: flex; width: 80%; justify-content: space-evenly; margin: 0 auto; } .help_content_1_sub { margin: 10px auto; width: 60%; height: 200px; background-image: url(arrow.svg); background-repeat: no-repeat; background-size: contain; background-position: center; position: relative; } .help_content_1_sub>div { position: absolute; top: 100%; left: 50%; transform: translate(-50%, -120%); color: #eee; font-size: 1.5em; margin: auto; } .boxed { border: 3px #A35200 solid; border-radius: 50px; position: relative; width: 30%; } .boxed:after { content: ""; display: block; padding-bottom: 100%; } .boxed>div { margin: 0; font-size: 1.7em; text-align: center; } .centering { position: relative; } .centering>div { margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .help_content_1 { color: #eee; } .help_content_1>div { margin: 10px; } .arrow { width: 20%; background-color: #A35200; clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%); font-weight: bolder; font-size: 1.5em; } .arrow>div { text-align: center; }