Don't understand why isn't wrapping around images text. Please help to understand.

Here is the code:
HTML
<!DOCTYPE html>
<html lang="EN">
the <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Example</title>
</head>
<div class="box">
<figure class="picture">
<img
src="Sam_Houston_portrait.jpg"
title="Houston"
alt="Here should be photos of Houston."
width="25%"
height="25%"
>
<figcaption>Samuel Houston</figcaption>
</figure>
<p>the Town is named after Samuel Houston, commander in chief of the Texas army during the Texas revolution (1835-1836) and the President of the Republic of Texas (1836-1838, 1841-1844).</p>
<p>the Official nickname of Houston is "Space city" which can be translated as "space city," "city space" or "cosmogram". The name was given due to the fact that there
is the space center Lyndon B. Johnson. The city has just 12 names.</p>
<p>In American colloquial speech is a popular phrase: "Houston, we have a problem" (eng. Houston, we've had a problem), which appeared after the failed mission of Apollo 13.
In Houston were shooting the movie "Apollo 13", the plot of which went to the actual events of the mission.</p>
</div>
</body>
</html>
AND
CSS
.text{
color: rgba(31, 31, 31, 0.863);
}
.picture{
float: right;
}
.box{
margin: 25%;
border: 2px solid rgba(44, 25, 25, 0.466);
padding: 2%;
}