How to put one whole class to the right ? / how to add padding in class? - confused ( React.js - Bootstrap)

So, I am a react js and bootstrap noob. Please help me by telling how can I achieve this desired change - Basically I want the Image ( which is seen on the right in the image below) to be put on the total right on my website, currently the text and image are a too close to each other. How can I do this? below the image is also my code for that webpage. https://i.stack.imgur.com/6OoTa.png

import React from "react";
import web from "../src/images/myimage.svg";
import {NavLink} from "react-router-dom";


const Common =(props)  => {
    return (
         <>
          <section id = "header" className = "d-flex align-items-between  ">
          <div className = "container-fluid">
            <div className = 'row'>
                <div className = "col-10" mx-auto>
                  <div className ="row">  

                  
                  <div className = "col-md-6 pt-5 pt-lg-0 order-2 order-lg-1 d-flex justify-content-center flex-column">
                    <h1>{props.name} <strong className = "brand-name"> Pinnacle Tutorials</strong>
                    </h1>
                    <h2 className = "my-3">
                       We are a team of talented Teachers here for your ward
                     </h2>
                     <div ClassName = "mt-3">
                         <NavLink to={props.visit} className = "btn btn-success">Get Started check - {props.btname}</NavLink>
                     </div>

                  </div>
                  <div className = "col-lg-6   order-6 order-lg-5 pad-10 header-img">
                    <img src ={props.imgsrc} className = "img-fluid animated" alt = "home img "/>

                  </div>
                  </div>
                </div>
               </div>
              </div>  
          </section>
         </>

     
    );
};

export default Common;

NAVBAR CODE :

import React from "react";
import { NavLink } from "react-router-dom";


const Navbar = () => {
    return (
        <>
         <div className = "container-fullwidth nav_bg">
            <div className = 'row'>
                <div className = "col-10" mx-auto>

           
          <nav className="navbar navbar-expand-lg navbar-light bg-light py-3 container-fluid">
  <NavLink className="navbar-brand" to="/">Pinnacle Tutorials</NavLink>

  <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span className="navbar-toggler-icon"></span>
  </button>

  <div className="collapse navbar-collapse" id="navbarSupportedContent">
    <ul className="navbar-nav ms-auto">
      <li className="nav-item active">
        <NavLink activeClassName ="menu_active" exact className="nav-link" to="/">Home <span className="sr-only">(current)</span></NavLink>
      </li>
      <li className="nav-item">
        <NavLink activeClassName ="menu_active" className="nav-link" to="/about">About</NavLink> 
      </li>
      <li className="nav-item">
        <NavLink activeClassName ="menu_active" className="nav-link" to="/service">Services</NavLink>
      </li>
      <li className="nav-item">
        <NavLink activeClassName ="menu_active" className="nav-link" to="/contact">Contact</NavLink>
      </li>
      
      
    </ul>
   
  </div>
</nav>
     </div>
            </div>

         </div>
        </>
    );
};
export default Navbar

Via Active questions tagged javascript - Stack Overflow https://ift.tt/2FdjaAW