تمرین ج 9/ میشه به یک المان دو پوزیشن داد؟

سلام و وقت بخیر . برای ج 9 که استاد گفتند ما میتونیم باکس بزرگ‌تر را نسبت به کل سند یا همان تگ html جا به جا کنیم من آمدم یک تمرین خیلی ساده زدم . میخواستم ببینم درسته یا نه ؟ یک سوال دیگه که دارم من وقتی با open with live server میزنم تا روی سایت بالا بیاد روی کروم بالا میاد نه گوگل کروم بعد اینکه من با کروم باز مکنم یک فونت دیگه میبینم و با گوگل کروم باز میکنم یک فونت دیگه میبینم و اینکه از لحاظ اندازه ای هم یک ذره متفاوت هستند.

نمیدونم چرا روی آپلود فایل میزنم تا فایل zip را که خیلی هم کم حجم هست نمیتونم آپلود کنم !؟ الان پس همینجا کدها را کپی میکنم. کدهای HTML :

html>
<html lang="fa" dir="rtl">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>تمرین جلسه 9title>
    <link rel="stylesheet" href="style2.css" />
  head>
  <body>
    <nav class="nav">
      <ul class="test">
        <li><a class="#" href=""> خانهa>li>
        <li><a class="#" href=""> دوره‌های آموزشی a>li>
        <li><a class="#" href=""> درباره ما a>li>
        <li><a class="#" href=""> تماس با ما a>li>
        <li><a class="#" href=""> پشتیبانیa>li>
      ul>
    nav>
    
    <div class="parent">
        <p class="p_1">
            متن آزمایشی
        p>
      <div class="child">
        <span class="one">1span>
      div>
    div>
  body>
html>
کد‌های CSS :@font-face{
    font-family:'Vazir_Medium';
    src: url('../fonts/Vazir-Medium.eot') format('eot'),
    url('../fonts/Vazir-Medium.woff') format('woff'),
    url('../fonts/Vazir-Medium.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
 }
body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Vazir_Medium;
}
a {
    text-decoration: none;
}
ul,ol,li {
    margin:0;
    padding:0;
    list-style: none;
}
/* ul, li{
    margin: 0;
    padding:0;
} */
/* menu style */
nav.nav{
background-color:#efefef;
padding:10px;
font-size:16px; 
}
.test {
    text-align: center;
} 
.test li{
    /* margin:0 5px; */
    padding:10px;
    display:inline;
}
.test li:hover{
    background-color: yellow;
    border-bottom:2px dashed red;
}
.test li a:hover{
    color: blue;
  
}
.test li:active{
    background-color: #fff;
}
.test li a:visited{
    color:green;
}
.input:focus{
border:3px dashed yellow;
background-color: red;    
outline-color: green;
}
.parent {
    background: red;
    color:#ffffff;
    width:200px;
    height:200px;
    position:relative;
    position: absolute;
    top: 260px;
    right: 846px;
}
.child{
    text-align:center;
    background-color: yellow;
    color:#0f0f0f;
    width:50px;
    height:50px;
    position:absolute;
    position: relative;
    /* top:0; */
    top:75px;
    right:75px;
} 
.p_1{
    position: absolute;
    top: 1px;
    right: 38px;
    color: white;
    font-size: 25px;
}
.one{
position:absolute;
    right: 22px;
    top: 12px;
}