bootstrap 3: Text alignment in jumbotron

I have developed a web page in bootstrap 3. Everything looks perfect on computer screen. But however on mobile screen text in jumbotron is coming out of it due to which a horizontal scroll bar appears on it .

<div id="home">
    <div id="jumb" class="jumbotron">
        <div class="container text-center">
        <div class="row">
            <div class="col-lg-3">
                <img id="abc" src="images/abc.jpg" alt="logo" />
            </div>
            <div class="col-lg-9" >
                <font style="font-family: Times New Roman" size="20" color="white" id="headline">hello</font><br>
                <div class="collapse navbar-collapse" id="navbar-collapse">
            <a href="#btn1" class="btn btn-info navbar-btn navbar-bottom" id=""><font color="white"><b>button1</b></font></a>
            <a href="#btn2" class="btn btn-info navbar-btn navbar-bottom" id=""><font color="white"><b>button2</b></font></a>
            <a href="#btn3" class="btn btn-info navbar-btn navbar-bottom" id=""><font color="white"><b>button3</b></font></a>
            <a href="#btn4" class="btn btn-info navbar-btn navbar-bottom" id=""><font color="white"><b>button5</b></font></a></div>
                <div class="btn-group">
                    <!--<marquee width="1000px"><a href=""><font color="white"><h3>XYZ</h3></font></a></marquee>-->             
                </div>
                </div>
            </div>
        </div>
    </div>
    </div>