Я хочу вспомнить свои nav-bar справа от моего экрана, но я не могу понять, как это сделать. Я пытался поиграть со свойством margin, но это просто сломалось. Я знаю, что это беспорядок, но я не удалил ненужный код, пытаясь решить мою проблему.
Ниже кода.
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap");
/* font-family: 'Open Sans', sans-serif; */
* {
box-sizing: border-box;
font-family: "Open Sans", sans-serif;
}
body {
overflow-x: hidden;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
img {
max-width: 100%;
height: auto;
}
.button {
display: inline-block;
font-size: 1.15rem;
text-decoration: none;
padding: 0.5em 1.3em;
border-width: 2px;
border-style: solid;
}
.container {
width: 95%;
margin: 0 auto;
}
/*Home Section*/
header {
text-align: center;
position: absolute;
margin: 1em;
}
.logo {
max-width: 180px;
max-height: 180px;
}
#nav-ul {
margin: 2em;
padding-top: 0.7em;
padding-bottom: 0.7em;
list-style-type: none;
}
.nav-item {
display: inline-block;
margin: 0em;
}
.nav-links {
font-weight: 900;
text-decoration: none;
font-size: 1rem;
padding: 0.3em;
color: white;
}
.nav-links:hover,
.nav-links:focus {
color: lightgray;
}
#home-section {
text-align: center;
width: 100vw;
background-image: url(imgs/home-section-background.jpg);
background-size: cover;
background-position: center;
padding: 10em 0;
}
.title {
color: white;
font-size: 2.5rem;
}
.button-green {
margin-top: 1.8em;
color: rgb(3, 204, 30);
border-color: rgb(12, 255, 45);
}
.button-green:hover,
.button-green:focus {
background-color: rgb(8, 163, 26);
}
/* About section */
#about-examples {
text-align: center;
}
.description-text {
background-color: rgb(68, 68, 68);
color: white;
padding: 3em;
width: 100vw;
margin-left: -2.5%;
outline: 2px solid rgb(12, 255, 45);
outline-offset: -2.1em;
position: relative;
}
.description-text p {
text-align: justify;
}
.description-text h1 {
font-size: 1.3em;
text-align: center;
margin-top: 0;
position: absolute;
top: 0.8em;
background-color: rgb(68, 68, 68);
color: rgb(12, 255, 45);
padding: 0 0.5em;
left: 50%;
transform: translateX(-50%);
}
/*Media quiries*/
@media (min-width: 60rem) {
.title {
font-size: 4rem;
}
.nav-links {
font-size: 2rem;
float: right;
}
.nav-item {
}
.button {
font-size: 2rem;
}
.logo {
float: left;
margin: 1em;
}
#nav-ul {
float: right;
}
.description-text {
font-size: 3em;
}
.description-text p {
font-size: 0.5em;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>About Me</title>
<link href="ResponsiveWeb.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header>
<img src="imgs/logo.jpg" alt="company logo" class="logo" />
<ul id="nav-ul">
<li class="nav-item">
<a href="#home-section" class="nav-links">Home</a>
</li>
<li class="nav-item">
<a href="#about-examples" class="nav-links">About</a>
</li>
<li class="nav-item">
<a href="#contacts" class="nav-links">Contact</a>
</li>
</ul>
</header>
<!--Company name goes here-->
<section class="home" id="home-section">
<div class="containter">
<h1 class="title">Making proffesional design and development</h1>
<a href="#" class="button button-green">See our work</a>
</div>
</section>
<!--Company description goes here-->
<div class="container">
<section class="about-company" id="about-examples">
<div class="description-text">
<h1>What we do</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh sit
amet commodo nulla facilisi.
</p>
<p>
Nam eget sem sed sem rutrum efficitur. Nullam lorem nunc, porta et
faucibus semper, suscipit id mauris. Sed nisi eros, mollis at mollis
a, porta et sapien. Fusce blandit tempus justo. Aenean erat magna,
semper nec commodo quis, feugiat sit amet lacus. Vestibulum tempor
ornare fermentum. Vestibulum egestas imperdiet libero, sed egestas
purus varius a. Mauris consequat ligula ipsum, at faucibus lectus
blandit quis. Donec congue eros sed est sollicitudin, in ultricies
lorem consectetur. Maecenas suscipit tortor orci, id pellentesque
nisi maximus at. In laoreet turpis id tempor dapibus. Nunc facilisis
egestas ex et ullamcorper. Mauris nunc felis, porttitor nec porta
cursus, egestas vitae tellus. Ut commodo in metus eget blandit.
Maecenas vestibulum dictum neque, at dictum arcu lobortis nec. Donec
quis augue arcu.
</p>
</div>
</section>
</div>
<!--Work Example-->
<section class="work-example">
<h1>Example of our work</h1>
<figure class="port-example">
<img
src="imgs/Portfolio-pic-01 Jeremy Bishop.jpg"
alt="Beautiful tree"
/>
<figcaption class="port-description">
<p>Photo by Jeremy Bishop</p>
<a href="#" class="button button-green button-small"
>See project details</a
>
</figcaption>
</figure>
<figure class="port-example">
<img src="imgs/Portfolio-pic-02 Jay Mantri.jpg" alt="Fog over forest" />
<figcaption class="port-description">
<p>Photo by Jay Mantri</p>
<a href="#" class="button button-green button-small"
>See project details</a
>
</figcaption>
</figure>
<figure class="port-example">
<img
src="imgs/Portfolio-pic-03 Riccardo Chiarini.jpg"
alt="Beautiful lake"
/>
<figcaption class="port-description">
<p>Photo by Riccardo Chiarini</p>
<a href="#" class="button button-green button-small"
>See project details</a
>
</figcaption>
</figure>
<figure class="port-example">
<img
src="imgs/Portfolio-pic-04 redcharlie.jpg"
alt="Beautiful tree in forest"
/>
<figcaption class="port-description">
<p>Photo by redcharlie</p>
<a href="#" class="button button-green button-small"
>See project details</a
>
</figcaption>
</figure>
<figure class="port-example">
<img
src="imgs/Portfolio-pic-05 Vincent van Zalinge.jpg"
alt="Bird on brnanch"
/>
<figcaption class="port-description">
<p>Photo by Vincent van Zalinge</p>
<a href="#" class="button button-green button-small"
>See project details</a
>
</figcaption>
</figure>
<figure class="port-example">
<img
src="imgs/Portfolio-pic-06 eberhard grossgasteiger.jpg"
alt="Fog over mountains"
/>
<figcaption class="port-description">
<p>Photo by eberhard grossgasteiger</p>
<a href="#" class="button button-green button-small"
>See project details</a
>
</figcaption>
</figure>
</section>
<footer id="contacts">
<p>Work hours: Mon-Fri 8:00 AM - 16:00 PM</p>
<br />
<p>You can contact us here:</p>
<br />
<ul class="contact-links">
<li class="contact-link"><a class="contact" href="#">A</a></li>
<li class="contact-link"><a class="contact" href="#">B</a></li>
<li class="contact-link"><a class="contact" href="#">C</a></li>
</ul>
</footer>
</body>
</html>