merhaba, sizin için şöyle bir şey yaptım.
AÇIKLAMA:
html kısmında tüm elementlerimizi dış bir katman içine aldım. ardından heade içine h1 ve unordered list içine list itemleri yazdım.
dış katmanımız flex ancak dikey, yani flex-direction: column içerdeki header sizin yaptığınız gibi. tek fark width'i 98 vw yani ekranın %98ini kaplayacak şekilde.
listemiz yine sizinkine benzer özelliklerde ekstra bir olayı yok. tek farkı içeride flex col ile tuttuğum elementleri birbirinden artık margin top ile rahatça ayırabiliyoruz.
cssde en altta listeye verdiğim margin top ile istediğiniz mesafece ayarlayabiliyorsunuz. Tavsiyem iç içe elementler tanımlayıp içeridekini marginle boyutla uğraşacağınıza dışardakine padding vermeniz.
bu arada en üstteki kod da reset css oluyor.
html:
<div class="dis-katman">
<header class="header"> <h1>→ tolgahan.webdev ←</h1> </header>
<ul class="links">
<li><a href="#">Anasayfa</a></li>
<li><a href="#">Hakkımda</a></li>
<li><a href="#">İletişim</a></li>
</ul>
</div>
css:
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
.dis-katman {
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
margin:0 auto;
}
.header h1{
border:3px solid rgb(255,80,63);
padding:10px;
margin-top:20px;
width:95vw;
text-align: center;
}
ul li{
list-style:none;
display:inline-block;
margin:10px;
border-radius: 10px;
background-color: black;
color:red;
list-style-type: none;
padding:10px;
}
ul {
margin-top:100px;
}```
