Причина, по которой div об авторских правах не отображается, заключается в том, что ваш <div class="navbarSocialMedia"> имеет фиксированную позицию, поэтому он отображается поверх нижнего колонтитула (который также имеет фиксированное положение).
An элемент с position: fixed; позиционируется относительно области просмотра, что означает, что он всегда остается на том же месте, даже если страница прокручивается. w3
Я установил атрибуты bottom: 0; left: 0; right: 0; нижнего колонтитула, чтобы он отображался в нижней части окна и с полной шириной.
Также я бы предложил удалить margin-bottom: 100px из <p class="copyright">, так как это занимает слишком много места из окна.
И последнее, но не менее важное: я заметил, что для <div class="navbarSocialMedia"> вы установили text-align: center (так что я предполагаю вы хотите, чтобы значки располагались по центру), но поскольку у него есть свойство display: flex. Вместо этого лучше использовать align-items: center.
Надеюсь, это вам поможет.
.content {
padding: 10.4%;
}
.main {
height: 800px;
background-color: #f9f9f9;
}
.copyright {
color: black;
text-align: center;
font-family: 'Poppins';
font-size: 70%;
font-weight: 300;
line-height: 1.8em;
display: block;
}
.navbarSocialMedia {
display: flex;
justify-content: center;
overflow: hidden;
background-color: white;
width: 100%;
align-items: center;
}
.newFooter {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background-color: white;
width: 100%;
}
.navbarSocialMedia a {
display: inline-block;
width: 3.5%;
color: black;
text-align: center;
padding: 5px 5px;
text-decoration: none;
font-size: 17px;
font-family: "Poppins";
}
.mediaLogo {
display: block;
margin-left: auto;
margin-right: auto;
width: 21px;
height: 21px;
margin-top: 10px;
margin-bottom: 10px;
}
<!DOCTYPE html>
<html lang="en-US">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<title>Giving Back</title>
<link href="simpleCSS.css" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Poppins' rel='stylesheet'>
<link rel="shortcut icon" type="image/png" href="name.png">
</head>
<body class="services">
<div class="header">
<a href="simple.html">
<img src="name.png" alt="Logo" class="logo"> </a>
<div class="navBar">
<a href="ourstory.html" class="ourstory">Our Story</a>
<a href="services.html" class="services">Giving Back</a>
</div>
</div>
<br>
<br>
<br>
<div class="main">
<div class="content">
<p class="p3"> content
</p>
</div>
</div>
<div class="newFooter">
<div class="navbarSocialMedia">
<a href="https://www.instagram.com/" target="_blank">
<img src="InstagramLogo48.png " alt="email logo" class="mediaLogo"> </a>
<a href="https://www.linkedin.com" target="_blank">
<img src="linkedin48.png " alt="linked in logo" class="mediaLogo"> </a>
<a href="//www.google.com" target="_blank">
<img src="emaillogo48.png " alt="email logo" class="mediaLogo"> </a>
<a href="https://www.facebook.com " target="_blank">
<img src="facebooklogo48.png " alt="facebook logo" class="mediaLogo"> </a>
</div>
<div class="try">
<p class=" copyright ">Copyright ©. </p>
</div>
</div>
</body>
</html>