Boa tarde! Estou realizando um projeto mas estou com dificuldades em deixar o texto do p na mesma linha, sem quebra... Estou usando o display mas sem resultados.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="reset.css/reset.css">
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+Antique:wght@300&display=swap" rel="stylesheet">
<title>Síndica Profissional</title>
</head>
<body>
<header>
<div class="caixa">
<ul>
<nav>
<li><a href="">Home</a></li>
<li><a href="">Quem somos</a></li>
<li><a href="">Contato</a></li>
</nav>
</ul>
</div>
</header>
<div class="container">
<h2 class="titulo-container">Olá,</h2>
<h3 class="titulo-container">nós somos</h3>
<p class="texto">Somos uma empresa de sindicatura profissional, atuando no mercado há mais 10 anos, da Região de Campinas - SP. Venha nos conhecer melhor!</p>
</div>
</body>
body{
font-family: 'Zen Kaku Gothic Antique', sans-serif;
}
nav{
position: absolute;
top: 50px;
left: 900px;
}
nav li{
display: inline;
padding: 10px;
margin: 0 0 0 15px;
}
nav a{
text-transform: uppercase;
text-decoration-line: none;
font-size: 28px;
font-weight: bold;
color: rgb(49, 48, 48);
}
nav a:hover{
color: rgb(3, 3, 3);
text-decoration: underline
}
header{
background:rgb(161, 161, 158);
padding: 60px 0;
}
.container{
background-color: rgba(173, 233, 213, 0.24);
padding: 15%;
margin-right: 15%;
margin-left:15% ;
}
.titulo-container{
font-size: 60px;
font-weight: bold;
position:relative;
right:35%;
bottom:100px;
padding: 10px;
}
.texto{
font-size: 25px;
position: relative;
right: 35%;
bottom: 20px;
text-align: left;
display: inline-block;
}
.banner{
width: 100%;
height: 600px;
}
