I've been experimenting with different properties, but my CSS just won't stay in place. I've tried using absolute and fixed positioning, but without success. I want the elements to remain in their respective positions - the greeting on the left and the picture on the right of the sign-out buttons. I need them to stay in place even when resizing the window or viewing on a different screen.
https://i.sstatic.net/eNeF4.png
https://i.sstatic.net/52qAy.png
This is my index.css:
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
... (CSS code continues)
<p>This is my app.css:</p>
<pre><code>.App {
text-align: center;
}
... (CSS code continues)
<p>index.html :</p>
<pre><code><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>