How to move
to the right?

Question

was making a website for class and I can't get a hold on how to make dl move to the right. all I see was ul or ol being moved from researching. And all I want for it to do is to be able to move definition list to the right.

    <dl class="content">
            <dt> STARRING </dt>
                <dd> Mako </dd>
                <dd> Sarah Michelle Gellar </dd>
                
            <dt> DIRECTOR </dt>
                <dd> Kevin Munroe </dd>
                
            <dt> RATING </dt>
                <dd> PG </dd>
                
            <dt> THEATRICAL RELEASE </dt>
                <dd> Mar 23,2007 </dd>
                
            <dt> MOVIE SYNOPSIS </dt>
                <dd> After the defeat of their old arch nemesis, The Shredder, the Turtles have grown apart as a family. </dd>
    
            <dt> MPAA RATING </dt>
                <dd> PG, for animated action violence, some scary cartoon images and mild language </dd>
    
            <dt> RELEASE COMPANY </dt>
                <dd> Warner Bros </dd>
    
            <dt> GENRE </dt>
                <dd> Action/Adventure, Comedy </dd> 
                <dd> Children, Martial Arts, Superheroes </dd>  
                <dd> Ninjas, Animated Characters </dd>  
                
            <dt> OFFICIAL MOVIE SITE </dt>
                <dd> The Official TMNT Site </dd>
                
        </dl>

    dl.content {
        background-position: right bottom;
        width: 250px;
        background-color: #A2B964;
        padding: 10px 10px 10px 0px;
        margin: 1em 0;
        right: 10%;
        
    }
    
    dt{
        font-size: 8pt;
        font-family: Arial;
        font-weight: bold;
        padding: 1em;
    }
    
    dd{
        font-size: 8pt;
        font-family: Arial;
    }

Can't tell what you did exactly. Please share the html markup too — s.Bergmann, Sep 17 '22 at 15:28

Utmost Creator · Accepted Answer · 2022-09-17T16:27:51.557

For more information, please see the comments in CSS. You can also do a test it here: https://jsfiddle.net/UtmostCreator/r4yqdptw/

Read more about margin-left here, and w3.org link

dl.content {
  max-width: 200px; /* limit the container size */
  margin-left: auto; /* to push it to the right side */
}

<dl class="content">
            <dt> STARRING </dt>
                <dd> Mako </dd>
                <dd> Sarah Michelle Gellar </dd>
                
            <dt> DIRECTOR </dt>
                <dd> Kevin Munroe </dd>
                
            <dt> RATING </dt>
                <dd> PG </dd>
                
            <dt> THEATRICAL RELEASE </dt>
                <dd> Mar 23,2007 </dd>
                
            <dt> MOVIE SYNOPSIS </dt>
                <dd> After the defeat of their old arch nemesis, The Shredder, the Turtles have grown apart as a family. </dd>
    
            <dt> MPAA RATING </dt>
                <dd> PG, for animated action violence, some scary cartoon images and mild language </dd>
    
            <dt> RELEASE COMPANY </dt>
                <dd> Warner Bros </dd>
    
            <dt> GENRE </dt>
                <dd> Action/Adventure, Comedy </dd> 
                <dd> Children, Martial Arts, Superheroes </dd>  
                <dd> Ninjas, Animated Characters </dd>  
                
            <dt> OFFICIAL MOVIE SITE </dt>
                <dd> The Official TMNT Site </dd>
                
        </dl>

How to move to the right?

1 Answers1

How to move
to the right?