Cant resize class (angular 8)

[kylegilmartin5]

I’am new to angular and trying to mess around with API’s. I’am having trouble resizing this class I changed it to 10 with no offset but it just moved it the left.

<div class="row">
    <div class="Col-md-6 offset-md-3">
        <div *ngIf="weather; else waiting">
        <div class="Col-sm-12 text-center">

            
            <div class="input-group mt-5">
                <input class="form-control" type="text" #userInput placeholder="Enter city name">
                <div class="input-group-append">
                    <button class="input-group-text btn btn-outline-primary" (click)="getCity(userInput.value)">Search</button>
                </div>
            </div>
            <h5>Current Weather and Forcast in your city</h5>
            <h2>Weather in {{weather.name}}, {{weather.sys.country}}</h2>

        </div>


        <div class="Col-sm-12 text-center">
            <span class="temp">
                <img src="assets/{{ weather.weather[0].icon }}.png" alt="weather.png">
                {{ weather.main.temp | number: '1.0-0' }} &#176;C
            </span>
            <p class="text-upperCase font-italic font-weight-bold">
                {{weather.weather[0].description}}
            </p>
        </div>

        <table class="table table-light table-striped table-bordered table-sm">
            <tbody>
                <tr>
                    <td>Humidity</td><td>{{weather.main.humidity}}%</td>
                </tr>
                <tr>
                    <td>Pressure</td><td>{{weather.main.pressure}}hpa</td>
                </tr>
                <tr>
                    <td>Sunrise</td><td>{{weather.sys.sunrise * 1000 | date:'H:mm'}}</td>
                </tr>
                <tr>
                    <td>Sunset</td><td>{{weather.sys.sunset * 1000 | date:'H:mm'}}</td>
                </tr>
                <tr>
                    <td>Geo coords</td><td>[{{weather.coord.lat}}, {{weather.coord.lon}}]</td>
                </tr>
            </tbody>
        </table>
       <agm-map [latitude] = "lat" [longitude]= "lon" (mapClick)= "getCoords($event)">
            <agm-marker [latitude] = "lat" [longitude]= "lon"></agm-marker>
       </agm-map>
    </div>
    <ng-template #waiting>
        <img src="assets/loading.gif" height="50px" alt="WaitingLogo" *ngIf="locationDeined">
        <small>refesh page if page doesn't load after 10s</small>
        
        <div class="input-group mt-5" *ngIf="locationDeinedEnableCity">
            <input class="form-control" type="text" #userInput placeholder="Enter city name">
            <div class="input-group-append">
                <button class="input-group-text btn btn-outline-primary" (click)="getCity(userInput.value)">Search</button>
            </div>
        </div>

    </ng-template>
    </div>
</div>